@caltho/site-kit 0.2.11 → 0.3.0

package/dist/next/parts/Img.js

@@ -1,14 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // A picture from the site's images, at the widths `site-kit prepare` made: `sizes` says how wide
 // it shows, the browser picks the copy. Cropped to a shape by class (`ratio-4-3`), not by a
 // style attribute, which the content security policy would block. Above the fold (`eager`) it
 // loads first; everywhere else it waits until it's near.
 import { image } from "../data.js";
-export function Img({ src, alt, sizes, ratio, eager = false, className }) {
+/** `node`: a built section's node id, marked on the picture in CalOS's preview (data-node) so a click on it names the node. */
+/** Below this width a picture's phone version (`phoneSrc`) is shown in its place. */
+export const PHONE_WIDTH = 700;
+export function Img({ src, alt, sizes, ratio, eager = false, className, node, phoneSrc }) {
     const m = image(src);
     const [rw, rh] = ratio ? ratio.split("/").map(Number) : [m.width, m.height];
     const width = m.width;
     const height = Math.round((width * rh) / rw);
     const classes = [ratio ? `ratio-${ratio.replace("/", "-")}` : null, className].filter(Boolean).join(" ") || undefined;
-    return (_jsx("img", { src: m.src, srcSet: m.srcset.length ? m.srcset.map((s) => `${s.url} ${s.w}w`).join(", ") : undefined, sizes: m.srcset.length ? sizes : undefined, width: width, height: height, alt: alt, loading: eager ? "eager" : "lazy", decoding: eager ? "sync" : "async", fetchPriority: eager ? "high" : undefined, className: classes }));
+    const img = (_jsx("img", { src: m.src, srcSet: m.srcset.length ? m.srcset.map((s) => `${s.url} ${s.w}w`).join(", ") : undefined, sizes: m.srcset.length ? sizes : undefined, width: width, height: height, alt: alt, loading: eager ? "eager" : "lazy", decoding: eager ? "sync" : "async", fetchPriority: eager ? "high" : undefined, className: classes, "data-node": node }));
+    if (!phoneSrc)
+        return img;
+    // The phone version, at its own widths, chosen by the browser on a small screen (the <img> stays the picture: its class and alt).
+    const p = image(phoneSrc);
+    return (_jsxs("picture", { "data-node": node, children: [_jsx("source", { media: `(max-width: ${PHONE_WIDTH}px)`, srcSet: p.srcset.length ? p.srcset.map((x) => `${x.url} ${x.w}w`).join(", ") : p.src, sizes: "100vw", width: p.width, height: p.height }), img] }));
 }

package/dist/next/preview.js

@@ -10,10 +10,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // page → CalOS: { type: "calos:ready" }, { type: "calos:pick", path, block },
 //               { type: "calos:error", message }, { type: "calos:overflow", blocks } (the page's
 //               blocks with something past the screen's edge at this width, by index)
+// Built sections (../tree/messages.ts): calos:built-select, -hover and -boxes to CalOS;
+// calos:built-highlight and -state from it.
+import { allPages } from "../content/lists.js";
 import { Component, useEffect, useRef, useState } from "react";
 import { lookVars } from "../content/look.js";
 import { fontFiles, googleFont } from "../fonts-google.js";
-import { BUILT_IMAGES, fieldForImage, fieldForText, matchBlocks } from "../preview-match.js";
+import { BUILT_IMAGES, fieldForImage, fieldForText, isShown, matchBlocks, withoutVariant } from "../preview-match.js";
+import { showWithin, startBehaviors } from "../behaviors/index.js";
+import { swatchSlugs, tailwindInput } from "../built/theme.js";
+import { hasBuilt } from "../built/tree.js";
+import { NODE_ATTR } from "../tree/index.js";
 import { BLOCK_MARK, InPreview } from "./block-mark.js";
 import { setPrepared } from "./data.js";
 /** `labels`: what CalOS calls each of the page's blocks, shown on its outline. */
@@ -72,6 +79,15 @@ export function SitePreview({ origins, render, look }) {
         const onMessage = (e) => {
             if (!origins.includes(e.origin) || e.source !== window.parent)
                 return;
+            const said = e.data;
+            if (said?.type === "calos:built-highlight" && latest.current) {
+                highlight = { block: said.block, nodes: Array.isArray(said.nodes) ? said.nodes.filter((x) => typeof x === "string") : [] };
+                return drawHighlight(latest.current, true);
+            }
+            if (said?.type === "calos:built-state" && latest.current) {
+                forced = said.state === "normal" ? null : { block: said.block, node: said.node, state: said.state };
+                return applyState(latest.current);
+            }
             const sent = e.data;
             if (sent?.type !== "calos:show")
                 return;
@@ -106,11 +122,29 @@ export function SitePreview({ origins, render, look }) {
             const target = e.target;
             if (!m || !target)
                 return;
+            // A built section's own controls (a carousel's dots and arrows, which aren't nodes) work as on
+            // the site, so a slide can be brought up to edit.
+            if (target.closest(".kit-carousel-controls button, button[data-kit-to]"))
+                return;
             e.preventDefault();
             e.stopPropagation();
+            // Only what a person sees is what they clicked: the top element under the pointer that's shown,
+            // not a slide faded out over it (a carousel's slides are stacked in one place, the hidden ones
+            // still under the pointer), nor the words of one.
+            const stack = document.elementsFromPoint(e.clientX, e.clientY);
+            const shownEl = stack.find(seen) ?? target;
+            // A built section's element names its node: exact, nothing guessed.
+            const node = shownEl.closest(`[${NODE_ATTR}]`);
+            if (node) {
+                const n = blockElements(m)?.findIndex((d) => holds(d, node)) ?? -1;
+                // Or in the site's own header or footer (built): -1 or -2, as the editor numbers them.
+                const at = n >= 0 ? n : frameOf(node);
+                if (at !== null)
+                    return post({ type: "calos:built-select", block: at, node: node.getAttribute(NODE_ATTR), shift: e.shiftKey });
+            }
             // A link anywhere (a section's, the menu's, the footer's) is edited, never followed: CalOS's page picker moves between pages.
             // A picture under the pointer counts, even when something over it (a frame, a caption's box) took the click.
-            const under = document.elementsFromPoint(e.clientX, e.clientY).find((el) => el.tagName === "IMG" && seen(el)) ?? target;
+            const under = stack.find((el) => el.tagName === "IMG" && seen(el)) ?? shownEl;
             post({ type: "calos:pick", ...pick(under, m, wordsAt(e.clientX, e.clientY)) });
         };
         const onSubmit = (e) => e.preventDefault();
@@ -123,9 +157,26 @@ export function SitePreview({ origins, render, look }) {
             const selected = m ? blockElement(m) : null;
             hovered = n >= 0 ? blocks[n] : null;
             outline("section", hovered && hovered[0] !== selected?.[0] ? hovered : null, n >= 0 ? m?.labels?.[n] : undefined);
-            outline("hover", hoverable(target));
+            // Over a built section, the element itself (said to CalOS, for its layers), not the words in it.
+            const shownEl = document.elementsFromPoint(e.clientX, e.clientY).find(seen) ?? target;
+            // In the site's own header or footer (built): -1 or -2, as the editor knows them.
+            const framed = n < 0 && shownEl ? shownEl.closest(`[${NODE_ATTR}]`) : null;
+            const f = framed ? frameOf(framed) : null;
+            const node = n >= 0 ? (shownEl?.closest(`[${NODE_ATTR}]`) ?? null) : f !== null ? framed : null;
+            const id = node && (f !== null || holds(blocks[n], node)) ? node.getAttribute(NODE_ATTR) : null;
+            const at = f ?? n;
+            const said = id ? `${at}:${id}` : null;
+            if (said !== hoverSaid) {
+                if (id || hoverSaid)
+                    post({ type: "calos:built-hover", block: id ? at : Number(hoverSaid.split(":")[0]), node: id });
+                hoverSaid = said;
+            }
+            outline("hover", id ? node : hoverable(target));
         };
         const leave = () => {
+            if (hoverSaid)
+                post({ type: "calos:built-hover", block: Number(hoverSaid.split(":")[0]), node: null });
+            hoverSaid = null;
             hovered = null;
             outline("section", null);
             outline("hover", null);
@@ -243,6 +294,47 @@ export function SitePreview({ origins, render, look }) {
             window.removeEventListener("resize", keep);
         };
     }, [shown, round]);
+    // Built sections: their classes drawn as they're typed (Tailwind's browser build, given the same
+    // input as the build's compiler), their behaviors running (nothing moving by itself, so what's
+    // being edited stays put), where each element is said to CalOS after every drawing (and as the
+    // page scrolls, resizes or the classes' CSS changes), and the editor's selection and state kept.
+    useEffect(() => {
+        if (!shown)
+            return;
+        const page = allPages(shown.site).find((p) => p.path === shown.path) ?? shown.site.pages[0];
+        if (!page || !hasBuilt(page.blocks))
+            return;
+        loadTailwind(tailwindInput(swatchSlugs(look ? lookVars(shown.site.look, look) : undefined)));
+        if (!behaving) {
+            behaving = true;
+            startBehaviors(true);
+        }
+        let frame = 0;
+        const soon = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                const m = latest.current ?? shown;
+                applyState(m);
+                drawHighlight(m, false);
+                for (const [block, boxes] of builtBoxes(m))
+                    post({ type: "calos:built-boxes", block, boxes });
+            });
+        };
+        soon();
+        // The browser build writes the classes' CSS a moment after they're drawn: the boxes are said again then.
+        const css = new MutationObserver(soon);
+        css.observe(document.head, { childList: true, subtree: true, characterData: true });
+        void document.fonts?.ready.then(soon);
+        window.addEventListener("resize", soon);
+        window.addEventListener("scroll", soon, { passive: true });
+        return () => {
+            cancelAnimationFrame(frame);
+            css.disconnect();
+            window.removeEventListener("resize", soon);
+            window.removeEventListener("scroll", soon);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shown, round, look]);
     // The draft's Look, set on the page (LookStyle drew the published one into the build).
     // One the draft no longer sets (a colour removed, the footer back as designed) is taken off again.
     const setVars = useRef(new Set());
@@ -277,7 +369,7 @@ export function SitePreview({ origins, render, look }) {
     }, [shown, look]);
     if (!shown)
         return null;
-    const page = shown.site.pages.find((p) => p.path === shown.path) ?? shown.site.pages[0];
+    const page = allPages(shown.site).find((p) => p.path === shown.path) ?? shown.site.pages[0];
     if (!page)
         return null;
     return (_jsx(InPreview.Provider, { value: true, children: _jsx(Fallback, { onError: (message) => post({ type: "calos:error", message }), children: render(page, shown.site) }, round) }));
@@ -389,13 +481,26 @@ function blockElement(m) {
 function wordsAt(x, y) {
     const doc = document;
     const node = doc.caretPositionFromPoint?.(x, y)?.offsetNode ?? doc.caretRangeFromPoint?.(x, y)?.startContainer;
-    if (node?.nodeType !== Node.TEXT_NODE)
-        return null;
     // The caret snaps to the nearest text, even across empty space: only words actually under the pointer count.
-    const range = document.createRange();
-    range.selectNodeContents(node);
-    const under = [...range.getClientRects()].some((r) => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
-    return under ? (node.textContent?.trim() ?? null) || null : null;
+    const under = (t) => {
+        const range = document.createRange();
+        range.selectNodeContents(t);
+        return [...range.getClientRects()].some((r) => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
+    };
+    const words = (t) => (t.textContent?.trim() ?? null) || null;
+    // Words a person sees: the caret finds text in whatever's on top, a faded-out slide stacked over
+    // the one showing as much as the one showing.
+    if (node?.nodeType === Node.TEXT_NODE && node.parentElement && seen(node.parentElement))
+        return under(node) ? words(node) : null;
+    // Then the words of the shown elements under the pointer, the top one first.
+    for (const el of document.elementsFromPoint(x, y)) {
+        if (!seen(el))
+            continue;
+        const t = [...el.childNodes].find((c) => c.nodeType === Node.TEXT_NODE && c.textContent?.trim() && under(c));
+        if (t)
+            return words(t);
+    }
+    return null;
 }
 /** What a click on `target` meant: the field, and the block it's in. `words`: the text right under the pointer, tried first. */
 function pick(target, m, words = null) {
@@ -485,14 +590,12 @@ const blockOf = (path) => (path[0] === "pages" && path[2] === "blocks" && typeof
  * slides, stacked in the same place) and not faded out to nothing.
  */
 function seen(el) {
+    const chain = [];
     for (let at = el; at && at !== document.body; at = at.parentElement) {
-        if (at.getAttribute("aria-hidden") === "true")
-            return false;
         const c = getComputedStyle(at);
-        if (c.visibility === "hidden" || c.display === "none" || Number(c.opacity) < 0.05)
-            return false;
+        chain.push({ ariaHidden: at.getAttribute("aria-hidden"), inert: at.hasAttribute("inert"), visibility: c.visibility, display: c.display, opacity: c.opacity });
     }
-    return true;
+    return isShown(chain);
 }
 /** The smallest thing under the pointer that's words or a picture. */
 function hoverable(el) {
@@ -504,6 +607,130 @@ function hoverable(el) {
     }
     return null;
 }
+// ---- built sections ----
+/** What the editor has selected in a built section (calos:built-highlight), outlined after every drawing. */
+let highlight = null;
+/** A node drawn as hovered or focused while those classes are edited (calos:built-state). */
+let forced = null;
+/** The built node last said to be under the pointer ("block:node"). */
+let hoverSaid = null;
+let behaving = false;
+let tailwind = null;
+/**
+ * Tailwind's browser build, loaded once (a chunk of its own: only this page carries it, never a
+ * visitor's), compiling the classes on the page as they change. Its input is set first, so it
+ * never compiles its default (which resets the page's own styles): the theme and utilities only,
+ * prefixed as built sections draw them, with the draft's Look as the theme.
+ */
+function loadTailwind(input) {
+    let style = document.getElementById("kit-tailwind");
+    if (!style) {
+        style = document.createElement("style");
+        style.id = "kit-tailwind";
+        style.setAttribute("type", "text/tailwindcss");
+        document.head.appendChild(style);
+    }
+    if (style.textContent !== input)
+        style.textContent = input;
+    tailwind ??= import("@tailwindcss/browser").catch((err) => {
+        tailwind = null;
+        console.error("site-kit: Tailwind's browser build didn't load", err);
+    });
+}
+/** The site's own header (-1) or footer (-2), as the editor numbers them: the one a built element is in, or null. */
+const FRAMES = { "-1": "header", "-2": "footer" };
+function frameOf(el) {
+    const f = el.closest("[data-kit-frame]")?.getAttribute("data-kit-frame");
+    return f === "header" ? -1 : f === "footer" ? -2 : null;
+}
+function frameEls(block) {
+    const which = FRAMES[String(block)];
+    const el = which ? document.querySelector(`[data-kit-frame="${which}"]`) : null;
+    return el ? [el] : [];
+}
+/** The elements drawn for a node of a block (a repeated node has one for each item). */
+function nodeEls(m, block, node) {
+    const els = block < 0 ? frameEls(block) : (blockElements(m)?.[block] ?? []);
+    const sel = `[${NODE_ATTR}="${CSS.escape(node)}"]`;
+    return els.flatMap((el) => [...(el.matches(sel) ? [el] : []), ...el.querySelectorAll(sel)]);
+}
+/** Where each built element is on screen, by block, for CalOS's overlays: only what's shown (not a slide faded out). */
+function builtBoxes(m) {
+    const page = m.site.pages[pageIndex(m)];
+    const blocks = blockElements(m);
+    if (!page || !blocks)
+        return [];
+    const out = [];
+    page.blocks.forEach((b, i) => {
+        if (b.type !== "built" && b.type !== "use")
+            return;
+        const boxes = (blocks[i] ?? [])
+            .flatMap((el) => [...(el.hasAttribute(NODE_ATTR) ? [el] : []), ...el.querySelectorAll(`[${NODE_ATTR}]`)])
+            .filter(seen)
+            .map((el) => {
+            const r = el.getBoundingClientRect();
+            return { node: el.getAttribute(NODE_ATTR), x: Math.round(r.left), y: Math.round(r.top), w: Math.round(r.width), h: Math.round(r.height) };
+        });
+        out.push([i, boxes]);
+    });
+    return out;
+}
+/** The selected nodes outlined; brought into view when CalOS has just selected them, and shown where a behavior hides them (another slide, tab or closed item). */
+const highlightBoxes = [];
+function drawHighlight(m, scroll) {
+    const els = highlight ? highlight.nodes.flatMap((id) => nodeEls(m, highlight.block, id).slice(0, 1)) : [];
+    if (scroll)
+        els.forEach((el) => showWithin(el));
+    while (highlightBoxes.length < els.length) {
+        const box = document.createElement("div");
+        Object.assign(box.style, { position: "absolute", pointerEvents: "none", zIndex: "2147483647", ...looks.selected });
+        document.body.appendChild(box);
+        highlightBoxes.push(box);
+    }
+    highlightBoxes.forEach((box, i) => {
+        const el = els[i];
+        if (!el)
+            return void (box.style.display = "none");
+        const r = el.getBoundingClientRect();
+        Object.assign(box.style, { display: "block", top: `${r.top + window.scrollY}px`, left: `${r.left + window.scrollX}px`, width: `${r.width}px`, height: `${r.height}px` });
+    });
+    const first = els[0];
+    if (scroll && first) {
+        const r = first.getBoundingClientRect();
+        if (r.top < 0 || r.bottom > window.innerHeight)
+            window.scrollTo({ top: r.top + window.scrollY - window.innerHeight / 4, behavior: "smooth" });
+    }
+}
+/**
+ * A node drawn as hovered or focused: each of its classes for that state (hover:, focus:; and
+ * group-hover: and the like on what's inside it when it's a group) added without the state, so it
+ * shows while its hover classes are edited. Whatever was added before is taken off first.
+ */
+const STATE_VARIANTS = { hover: ["hover"], focus: ["focus", "focus-visible", "focus-within"] };
+const GROUP_VARIANTS = { hover: ["group-hover"], focus: ["group-focus", "group-focus-within"] };
+let forcedClasses = [];
+function applyState(m) {
+    for (const f of forcedClasses)
+        f.el.classList.remove(f.cls);
+    forcedClasses = [];
+    if (!forced)
+        return;
+    const force = (el, variants) => {
+        for (const c of [...el.classList]) {
+            const plain = withoutVariant(c, variants);
+            if (plain && !el.classList.contains(plain)) {
+                el.classList.add(plain);
+                forcedClasses.push({ el, cls: plain });
+            }
+        }
+    };
+    for (const el of nodeEls(m, forced.block, forced.node)) {
+        force(el, STATE_VARIANTS[forced.state]);
+        if ([...el.classList].some((c) => /:group$/.test(c)))
+            for (const inner of el.querySelectorAll(`[${NODE_ATTR}]`))
+                force(inner, GROUP_VARIANTS[forced.state]);
+    }
+}
 // Outlines drawn over the page, sized through the style object (allowed by the content security
 // policy, where a style attribute in the markup isn't), never catching the pointer. A section's
 // outline carries its name.

package/dist/next/sections.js

@@ -6,6 +6,7 @@ import { image, isDraft, lookValues } from "./data.js";
 import { Img } from "./parts/Img.js";
 import { Md } from "./parts/Md.js";
 import { Slideshow } from "./slideshow.js";
+import { BuiltSection, UseSection } from "./built.js";
 /** The kit's own classes, drawn from the Look by sections.css. */
 export const KIT_CLASSES = {
     section: "kit-section",
@@ -28,6 +29,10 @@ export function KitSection({ s, level = 2, classes: given }) {
             return _jsx(Slides, { s: s, level: level, classes: classes });
         case "own":
             return _jsx(Own, { s: s, level: level, classes: classes });
+        case "built":
+            return _jsx(BuiltSection, { s: s });
+        case "use":
+            return _jsx(UseSection, { s: s });
         default:
             return null;
     }

package/dist/policies.js

@@ -6,6 +6,20 @@
 // nothing said in its place: what to say of the counting is the business's, in `extra` (CalOS
 // suggests a paragraph as they turn it on). Plain language, US-first; a business adds its own
 // paragraphs with `extra`, and should have a lawyer read them once.
+import { asksConsent } from "./consent.js";
+/** Whether any page (a built section, the site's own header or footer) has a form of its own built in. */
+function hasBuiltForm(site) {
+    const seen = new WeakSet();
+    const visit = (v) => {
+        if (!v || typeof v !== "object" || seen.has(v))
+            return false;
+        seen.add(v);
+        if (!Array.isArray(v) && v.tag === "form")
+            return true;
+        return Object.values(v).some(visit);
+    };
+    return visit(site.pages) || visit(site.ownHeader) || visit(site.ownFooter) || visit(site.components);
+}
 /**
  * `collectsFromForm`: the site has a form that takes a visitor's name, email and message, which the
  * privacy policy says (it defaults to the site having a form address).
@@ -15,8 +29,10 @@ export function policy(site, which, o = {}) {
     const host = new URL(site.url).host.replace(/^www\./, "");
     const reach = [b.email ? `email [${b.email}](mailto:${b.email})` : null, b.phone ? `call ${b.phone}` : null].filter(Boolean).join(" or ");
     const place = b.address ? `${b.address.locality}, ${b.address.region}` : null;
-    const hasForm = o.collectsFromForm ?? !!site.form;
+    const hasForm = o.collectsFromForm ?? (!!site.form || hasBuiltForm(site));
     const counts = !!site.countsVisits;
+    // Asking before counting (the site's consent setting): said, in place of the claim of no cookies.
+    const asks = asksConsent(site);
     if (which === "privacy") {
         return {
             title: "Privacy policy",
@@ -31,9 +47,11 @@ export function policy(site, which, o = {}) {
                 ]
                     .filter(Boolean)
                     .join("\n"),
-                counts
-                    ? `This site doesn't use cookies or advertising trackers. Its fonts and pictures come from this site itself.`
-                    : `This site doesn't use cookies, advertising or analytics trackers. Its fonts and pictures come from this site itself, so visiting it doesn't tell anyone else you were here.`,
+                asks
+                    ? `This site doesn't use advertising trackers. ${counts ? "It counts visits to see what's useful, but only if you agree when it asks (the banner when you first visit); until then, nothing is counted." : "It asks before using anything to count visits (the banner when you first visit), and uses nothing until you agree."} Your choice is kept in your own browser, and you can change it at any time. Its fonts and pictures come from this site itself.`
+                    : counts
+                        ? `This site doesn't use cookies or advertising trackers. Its fonts and pictures come from this site itself.`
+                        : `This site doesn't use cookies, advertising or analytics trackers. Its fonts and pictures come from this site itself, so visiting it doesn't tell anyone else you were here.`,
                 `## How we use it`,
                 `To answer you, to quote for and do the work you ask about, and to keep the records the law requires. We keep enquiries in our customer records system, which Caltho runs for us. We don't sell or rent your information, and we don't share it for advertising. The companies that help us run this site and our business (hosting, email, records) only use it to do that for us.`,
                 `## How long we keep it`,

package/dist/prepare.d.ts

@@ -1,4 +1,5 @@
 import { type Site } from "./content/index.ts";
+import type { BehaviorName } from "./tree/index.ts";
 export type PreparedImage = {
     width: number;
     height: number;
@@ -31,6 +32,11 @@ export type Prepared = {
     look?: Record<string, string>;
     /** The @font-face rules for the Google fonts its Look uses, their files fetched into public/_fonts (LookStyle writes them). */
     fontFaces?: string;
+    /** Built sections' CSS and their behaviors' scripts, as the site serves them (public/_kit), where its content has any: a page with a built section links them. */
+    built?: {
+        css?: string;
+        scripts?: Partial<Record<BehaviorName, string>>;
+    };
 };
 /** A site's visits counted: the id its pages send them with, where they're sent, and the script that sends them. */
 export type Analytics = {
@@ -39,6 +45,10 @@ export type Analytics = {
     script: string;
 };
 /** What CalOS says of the site's analytics, taken only when it's whole and its addresses are https (or a laptop's). */
+/** The business's forms' addresses CalOS sends, by key: only http(s) addresses under plain keys. */
+export declare function formsIn(body: {
+    forms?: unknown;
+} | null): Record<string, string> | undefined;
 export declare function analyticsIn(body: {
     analytics?: unknown;
 } | null): Analytics | undefined;

package/dist/prepare.js

@@ -13,9 +13,10 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
     }
     return path;
 };
+import { allPages } from "./content/lists.js";
 import { createHash } from "node:crypto";
 import { existsSync } from "node:fs";
-import { copyFile, mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { copyFile, mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
 import { dirname, extname, join, relative } from "node:path";
 import sharp from "sharp";
 import { pathToFileURL } from "node:url";
@@ -23,7 +24,20 @@ import { lookVars, uploadedFontCss } from "./content/index.js";
 import { fontFaceCss, fontFiles, googleFont, servedAt } from "./fonts-google.js";
 import { imagesIn, shareImageOf } from "./images.js";
 import { makeCards } from "./share.js";
+import { behaviorScript } from "./behaviors/index.js";
+import { builtCss } from "./built/css.js";
+import { migrateContent } from "./content-migrate.js";
+import { swatchSlugs } from "./built/theme.js";
+import { behaviorsIn, classesIn } from "./built/tree.js";
 /** What CalOS says of the site's analytics, taken only when it's whole and its addresses are https (or a laptop's). */
+/** The business's forms' addresses CalOS sends, by key: only http(s) addresses under plain keys. */
+export function formsIn(body) {
+    const f = body?.forms;
+    if (!f || typeof f !== "object" || Array.isArray(f))
+        return undefined;
+    const out = Object.fromEntries(Object.entries(f).filter(([k, v]) => /^[a-z0-9][a-z0-9-]{0,59}$/.test(k) && typeof v === "string" && /^https?:\/\//i.test(v) && URL.canParse(v)).map(([k, v]) => [k, new URL(v).href]));
+    return Object.keys(out).length ? out : undefined;
+}
 export function analyticsIn(body) {
     const a = body?.analytics;
     const address = (v) => typeof v === "string" && /^(https:\/\/|http:\/\/(localhost|127\.0\.0\.1)(:\d+)?\/?)/i.test(v) && URL.canParse(v);
@@ -43,6 +57,7 @@ export async function prepare(root, env = process.env, log = console.log) {
     let from;
     let editors = [];
     let analytics;
+    let forms;
     // A site CalOS has nothing published for yet (just made, its content not brought in) builds from
     // its own until there is: 404 is "nothing published", any other refusal is an error.
     const res = env.CALOS_CONTENT_URL
@@ -64,6 +79,7 @@ export async function prepare(root, env = process.env, log = console.log) {
             throw new Error(`Couldn't get the content from CalOS (${env.CALOS_CONTENT_URL}): ${res.status}`);
         const body = (await res.json());
         raw = body.content;
+        forms = formsIn(body);
         editors = editorsIn(body);
         analytics = analyticsIn(body);
         from = "CalOS";
@@ -90,6 +106,13 @@ export async function prepare(root, env = process.env, log = console.log) {
         from = "content/site.json";
     }
     const definition = await loadDefinition(root);
+    // Content in an older format than this kit's (CalOS hasn't moved it yet) is moved first, as CalOS would.
+    const moved = migrateContent((raw ?? {}));
+    if (!moved.ok)
+        throw new Error(`The site's content couldn't be moved to this kit's format (${moved.error.id}${moved.error.path.length ? ` at ${moved.error.path.join(".")}` : ""}): ${moved.error.message}`);
+    if (moved.applied.length)
+        log(`site-kit: content moved from format ${moved.from} to ${moved.format} (${moved.applied.map((a) => a.id).join(", ")})`);
+    raw = moved.content;
     const parsed = definition.parse(raw);
     if (parsed.problems)
         throw new Error(`The site's content needs fixing (${from}):\n  - ${parsed.problems.join("\n  - ")}`);
@@ -99,6 +122,11 @@ export async function prepare(root, env = process.env, log = console.log) {
         site.countsVisits = true;
     else
         delete site.countsVisits;
+    // Its built forms' addresses, by the business's forms' keys (never in content).
+    if (forms)
+        site.forms = forms;
+    else
+        delete site.forms;
     for (const w of parsed.warnings)
         log(`site-kit: warning: ${w}`);
     const schema = definition.jsonSchema();
@@ -111,15 +139,51 @@ export async function prepare(root, env = process.env, log = console.log) {
     const preferPicture = !!definition.share && definition.share.prefer === "picture";
     const look = definition.look ? lookVars(site.look, definition.look) : undefined;
     const fontFaces = definition.look ? [await googleFontsFor(site.look, definition.look, pub, log), await uploadedFontsFor(site.look, imagesDir, pub, log)].filter(Boolean).join("\n") : "";
-    const prepared = { site, images, csp: definition.csp, cards, ...(look ? { look } : {}), ...(fontFaces ? { fontFaces } : {}), ...(preferPicture ? { preferPicture } : {}), ...(editors.length ? { editors } : {}), ...(analytics ? { analytics } : {}) };
+    const built = await builtAssets(site, look, pub, log);
+    const prepared = { site, images, csp: definition.csp, cards, ...(look ? { look } : {}), ...(built ? { built } : {}), ...(fontFaces ? { fontFaces } : {}), ...(preferPicture ? { preferPicture } : {}), ...(editors.length ? { editors } : {}), ...(analytics ? { analytics } : {}) };
     await writeFile(join(out, "prepared.json"), JSON.stringify(prepared));
     log(`site-kit: content from ${from}, ${site.pages.length} pages, ${Object.keys(images).length} images${analytics ? ", visits counted" : ""}`);
     return prepared;
 }
+// ---- built sections ----
+/**
+ * What built sections need on the published site, where the content has any: the CSS for exactly
+ * the classes their trees use (Tailwind's compiler, the Look as its theme, no reset, ./built/css.ts)
+ * and the script of each behavior they use (./behaviors), written to public/_kit named by their
+ * content, so they cache for a year. A page links them only where it has a built section
+ * (./next/built.tsx). Made again every build; what an earlier build wrote is cleared first.
+ */
+async function builtAssets(site, look, pub, log) {
+    const dir = join(pub, "_kit");
+    await rm(dir, { recursive: true, force: true });
+    const classes = classesIn(site);
+    const behaviors = behaviorsIn(site);
+    if (!classes.size && !behaviors.size)
+        return undefined;
+    await mkdir(dir, { recursive: true });
+    const named = (body) => createHash("sha256").update(body).digest("hex").slice(0, 10);
+    const out = {};
+    const css = await builtCss(classes, swatchSlugs(look));
+    if (css) {
+        const name = `built.${named(css)}.css`;
+        await writeFile(join(dir, name), css);
+        out.css = `/_kit/${name}`;
+    }
+    for (const b of behaviors) {
+        const js = behaviorScript(b);
+        if (!js)
+            continue;
+        const name = `${b}.${named(js)}.js`;
+        await writeFile(join(dir, name), js);
+        (out.scripts ??= {})[b] = `/_kit/${name}`;
+    }
+    log(`site-kit: built sections, ${classes.size} classes${behaviors.size ? `, ${[...behaviors].join(", ")}` : ""}`);
+    return out;
+}
 // ---- pictures ----
 async function pictures(site, imagesDir, pub, log) {
     const used = imagesIn(site);
-    const shared = new Set(site.pages.map((p) => shareImageOf(site, p)?.src).filter((s) => !!s));
+    const shared = new Set(allPages(site).map((p) => shareImageOf(site, p)?.src).filter((s) => !!s));
     const have = existsSync(imagesDir) ? await list(imagesDir) : [];
     const missing = [...used].filter((src) => !have.includes(src));
     if (missing.length) {

package/dist/preview-match.d.ts

@@ -31,3 +31,24 @@ export declare function fieldForImage(value: unknown, base: Path, url: string, i
  * unknown, never guessed, unless the next block has no words to find it by.
  */
 export declare function matchBlocks(blocks: unknown[], drawn: string[]): (number | null)[];
+/** What the preview reads of an element and each element it's in, to know whether a person sees it. */
+export type Shown = {
+    ariaHidden: string | null;
+    inert?: boolean;
+    visibility: string;
+    display: string;
+    opacity: string;
+};
+/**
+ * Whether an element is one a person sees, from it and each element it's in (itself first): not in
+ * something hidden from them (a carousel's other slides, stacked in the same place and faded out,
+ * aria-hidden or inert) and not faded out to nothing. A click is matched only against what's seen,
+ * so the slide showing is the one a click on it opens, not one faded out on top of it.
+ */
+export declare function isShown(chain: readonly Shown[]): boolean;
+/**
+ * A built section's class (as drawn, prefixed) without the state variants given: `kit:md:hover:bg-ink`
+ * without hover is `kit:md:bg-ink`, which the preview adds to draw an element as hovered while its
+ * hover classes are edited. Null for a class without any of them.
+ */
+export declare function withoutVariant(cls: string, variants: readonly string[]): string | null;

package/dist/preview-match.js

@@ -1,6 +1,8 @@
 // Which field of the content a click in CalOS's preview landed on, with no markers in the site's
 // components: the words clicked are matched against the content's text, a picture by its address.
 // Pure, so it's tested here and runs in the preview in the browser.
+import { PREFIX } from "./built/theme.js";
+import { splitVariants } from "./tree/classes.js";
 /** The preview page's list of the pictures its build made (by path), as a JSON script with this id (../finish.ts). */
 export const BUILT_IMAGES = "calos-built-images";
 /** Keys that hold no words a visitor reads: never what a click on words means. */
@@ -110,3 +112,26 @@ export function matchBlocks(blocks, drawn) {
     }
     return out;
 }
+/**
+ * Whether an element is one a person sees, from it and each element it's in (itself first): not in
+ * something hidden from them (a carousel's other slides, stacked in the same place and faded out,
+ * aria-hidden or inert) and not faded out to nothing. A click is matched only against what's seen,
+ * so the slide showing is the one a click on it opens, not one faded out on top of it.
+ */
+export function isShown(chain) {
+    return chain.every((c) => c.ariaHidden !== "true" && !c.inert && c.visibility !== "hidden" && c.display !== "none" && !(Number(c.opacity) < 0.05));
+}
+/**
+ * A built section's class (as drawn, prefixed) without the state variants given: `kit:md:hover:bg-ink`
+ * without hover is `kit:md:bg-ink`, which the preview adds to draw an element as hovered while its
+ * hover classes are edited. Null for a class without any of them.
+ */
+export function withoutVariant(cls, variants) {
+    if (!cls.startsWith(`${PREFIX}:`))
+        return null;
+    const { variants: vs, utility } = splitVariants(cls.slice(PREFIX.length + 1));
+    const kept = vs.filter((v) => !variants.includes(v));
+    if (kept.length === vs.length)
+        return null;
+    return [PREFIX, ...kept, utility].join(":");
+}