@caltho/site-kit 0.2.10 → 0.3.0

package/dist/next/sections.d.ts

@@ -4,20 +4,29 @@ export type KitBlock = {
     placement?: Record<string, unknown>;
 } & Record<string, unknown>;
 /**
- * The site's own classes for a kit section's parts, each in place of the kit's: its band, its
- * container, its heading, its words, and its buttons (the main one and a quieter one).
+ * The styles for each thing a kit section draws. A kit section follows the site's Look (its theme:
+ * type scale, colours, buttons, width and spacing, as --look-* variables) with the kit's own classes
+ * (sections.css), so it looks right on any site with none of these given. A site may still name its
+ * own for any of them, in place of the kit's: `headingLarge` a section's own heading, `headingMedium`
+ * a heading under it, `headingSmall` the smallest; `text` body text, `muted` quieter text beside it (a
+ * price's "per month", a fact's label, who a quote is from).
  */
 export type KitClasses = {
-    section?: string;
-    wrap?: string;
-    heading?: string;
-    text?: string;
-    button?: string;
-    buttonQuiet?: string;
+    section: string;
+    wrap: string;
+    headingLarge: string;
+    headingMedium: string;
+    headingSmall: string;
+    text: string;
+    muted: string;
+    button: string;
+    buttonQuiet: string;
 };
+/** The kit's own classes, drawn from the Look by sections.css. */
+export declare const KIT_CLASSES: KitClasses;
 /** A block of one of the kit's types, drawn; null for any other (the site's own to draw). */
-export declare function KitSection({ s, level, classes }: {
+export declare function KitSection({ s, level, classes: given }: {
     s: KitBlock;
     level?: number;
-    classes?: KitClasses;
+    classes?: Partial<KitClasses>;
 }): import("react").JSX.Element | null;

package/dist/next/sections.js

@@ -1,11 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { placementClass } from "../content/index.js";
-import { image } from "./data.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { buttonStyleClass, placementClass } from "../content/index.js";
+import { ICONS } from "../sections/icons.js";
+import { videoEmbed } from "../sections/index.js";
+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",
+    wrap: "kit-wrap",
+    headingLarge: "kit-h kit-h-large",
+    headingMedium: "kit-h kit-h-medium",
+    headingSmall: "kit-h kit-h-small",
+    text: "kit-text",
+    muted: "kit-muted",
+    button: "kit-button",
+    buttonQuiet: "kit-button kit-button-quiet",
+};
 /** A block of one of the kit's types, drawn; null for any other (the site's own to draw). */
-export function KitSection({ s, level = 2, classes = {} }) {
+export function KitSection({ s, level = 2, classes: given }) {
+    const classes = { ...KIT_CLASSES, ...definedOnly(given) };
     switch (s.type) {
         case "gallery":
             return _jsx(Gallery, { s: s, level: level, classes: classes });
@@ -13,10 +29,18 @@ export function KitSection({ s, level = 2, classes = {} }) {
             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;
     }
 }
+/** A site's classes, those it left undefined taking the kit's ("" is the site's: nothing). */
+function definedOnly(c) {
+    return Object.fromEntries(Object.entries(c ?? {}).filter(([, v]) => typeof v === "string"));
+}
 const RATIO = { square: "1/1", landscape: "4/3", portrait: "4/5", "as-taken": undefined };
 function Heading({ level, id, className, children }) {
     const H = `h${Math.min(Math.max(level, 1), 6)}`;
@@ -26,7 +50,7 @@ function Heading({ level, id, className, children }) {
 function Gallery({ s, level, classes }) {
     const columns = Number(s.columns ?? "3");
     const headingId = s.heading ? `${s.id ?? "gallery"}-heading` : undefined;
-    return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-gallery", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap ?? "kit-wrap", children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.heading ?? "kit-heading", children: s.heading })), s.intro && _jsx(Md, { text: s.intro, top: level + 1, className: "kit-intro" }), _jsx("ul", { className: `kit-gallery-grid kit-cols-${columns}`, children: s.images.map((img) => {
+    return (_jsx("section", { className: [classes.section, "kit-gallery", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap, children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.headingLarge, children: s.heading })), s.intro && _jsx(Md, { text: s.intro, top: level + 1, className: "kit-intro" }), _jsx("ul", { className: `kit-gallery-grid kit-cols-${columns}`, children: s.images.map((img) => {
                         const copies = image(img.src).srcset;
                         const largest = copies.at(-1)?.url ?? image(img.src).src;
                         return (_jsx("li", { children: _jsxs("figure", { children: [_jsx("a", { href: largest, className: "kit-gallery-open", children: _jsx(Img, { src: img.src, alt: img.alt, sizes: `(min-width: 1024px) ${Math.round(100 / columns)}vw, 50vw`, ratio: RATIO[s.shape ?? "square"] }) }), img.caption && _jsx("figcaption", { children: img.caption })] }) }, img.src));
@@ -36,45 +60,102 @@ const SLIDE_RATIO = { wide: "kit-shape-wide", landscape: "kit-shape-landscape",
 /** Photos one at a time (Slideshow), each with its caption under it; its heading above when it has one. */
 function Slides({ s, level, classes }) {
     const headingId = s.heading ? `${s.id ?? "slideshow"}-heading` : undefined;
-    return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-slideshow", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap ?? "kit-wrap", children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.heading ?? "kit-heading", children: s.heading })), _jsx(Slideshow, { label: s.heading ?? "Photos", seconds: s.seconds, className: SLIDE_RATIO[s.shape ?? "wide"], children: s.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: "(min-width: 1200px) 1200px, 100vw", eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) })] }) }));
+    return (_jsx("section", { className: [classes.section, "kit-slideshow", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap, children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.headingLarge, children: s.heading })), _jsx(Slideshow, { label: s.heading ?? "Photos", seconds: s.seconds, className: SLIDE_RATIO[s.shape ?? "wide"], children: s.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: "(min-width: 1200px) 1200px, 100vw", eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) })] }) }));
 }
 const SHAPE = { "as-taken": undefined, landscape: "4/3", square: "1/1", portrait: "4/5" };
 const COLUMNS = { one: 1, two: 2, three: 3, four: 4, "wide-left": 2, "wide-right": 2 };
 /**
- * A section of the business's own: its columns of parts, laid out as chosen, each part in the site's
- * own classes where it gave them and the kit's otherwise. A heading is the page's next level down.
+ * A section of the business's own: its heading and intro (in the site's section heading style), then
+ * its columns of parts, laid out as chosen, each part in the site's own classes where it gave them
+ * and the kit's otherwise. A part's heading is the page's next level down (two down under a section
+ * heading). Its tone and spacing are classes (sections.css) from the site's Look: on soft, brand or
+ * dark it's a card inset within the content's width (its shape, unless it's a band across the
+ * page); a photo behind it is a picture under a scrim, the words light over it. On brand, dark or a
+ * photo the kit keeps the words and buttons readable over the site's own colour classes.
  */
 function Own({ s, level, classes }) {
     const n = COLUMNS[s.layout ?? "one"] ?? 1;
     const columns = s.columns.slice(0, n);
-    return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-own", `kit-own-${s.tone ?? "plain"}`, placementClass(s)].filter(Boolean).join(" "), id: s.id, children: _jsx("div", { className: classes.wrap ?? "kit-wrap", children: _jsx("div", { className: `kit-own-grid kit-own-${s.layout ?? "one"} kit-own-align-${s.align ?? "left"}`, children: columns.map((c, i) => (_jsx("div", { className: "kit-own-column", children: c.parts.map((p, j) => (_jsx(OwnPart, { p: p, level: level, classes: classes, columns: n }, j))) }, i))) }) }) }));
+    const tone = s.tone ?? "plain";
+    const behind = s.background;
+    const inverse = Boolean(behind) || tone === "brand" || tone === "dark";
+    const shaped = tone !== "plain" && !behind;
+    const align = s.align ?? "left";
+    const headingId = s.heading ? `${s.id ?? "own"}-heading` : undefined;
+    const partLevel = s.heading ? level + 1 : level;
+    const className = [
+        classes.section,
+        "kit-own",
+        `kit-own-${tone}`,
+        `kit-own-pad-${s.spacing ?? "normal"}`,
+        shaped && `kit-own-shape-${s.shape ?? "card"}`,
+        behind && "kit-own-behind",
+        inverse && "kit-own-inverse",
+        placementClass(s),
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("section", { className: className, id: s.id, "aria-labelledby": headingId, children: [behind && (_jsx("div", { className: "kit-own-bg", "aria-hidden": "true", children: _jsx(Img, { src: behind.src, alt: "", sizes: "100vw" }) })), _jsx("div", { className: classes.wrap, children: _jsxs("div", { className: "kit-own-panel", children: [(s.heading || s.intro) && (_jsxs("div", { className: `kit-own-head kit-own-align-${align}`, children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.headingLarge, children: s.heading })), s.intro && _jsx(Md, { text: s.intro, top: level + 1, className: ["kit-own-intro", classes.text].filter(Boolean).join(" ") })] })), _jsx("div", { className: `kit-own-grid kit-own-${s.layout ?? "one"} kit-own-align-${align}`, children: columns.map((c, i) => (_jsx("div", { className: ["kit-own-column", c.card && "kit-own-card", c.end && "kit-own-column-end", c.place && c.place !== "top" && `kit-own-column-${c.place}`].filter(Boolean).join(" "), children: runs(c.parts).map((run) => run.buttons ? (_jsx("div", { className: "kit-own-actions", children: run.parts.map((p, j) => (_jsx(OwnPart, { p: p, level: partLevel, classes: classes, columns: n }, run.at + j))) }, run.at)) : (_jsx(OwnPart, { p: run.parts[0], level: partLevel, classes: classes, columns: n }, run.at))) }, i))) })] }) })] }));
+}
+/** A column's parts, buttons one after another kept together (side by side, wrapping on a phone). */
+function runs(parts) {
+    const out = [];
+    parts.forEach((p, i) => {
+        const last = out.at(-1);
+        if (p.type === "button" && last?.buttons)
+            last.parts.push(p);
+        else
+            out.push({ at: i, buttons: p.type === "button", parts: [p] });
+    });
+    return out;
 }
+/** A part's words in the Look's other font, where it says. */
+const fontClass = (font) => (font === "text" ? "kit-font-text" : font === "heading" ? "kit-font-heading" : undefined);
 function OwnPart({ p, level, classes, columns }) {
     const width = `(min-width: 1024px) ${Math.round(100 / columns)}vw, 100vw`;
     switch (p.type) {
         case "heading": {
-            // Large is the section's own heading level; medium and small the levels under it.
-            const at = level + (p.size === "large" ? 0 : p.size === "small" ? 2 : 1);
-            return (_jsx(Heading, { level: at, className: [classes.heading ?? "kit-heading", `kit-own-h-${p.size ?? "medium"}`].join(" "), children: p.text }));
+            // Display, page and large are the section's own heading level (display and page drawn at the
+            // Look's largest sizes); medium and small the levels under it.
+            const big = p.size === "large" || p.size === "display" || p.size === "page";
+            const at = level + (big ? 0 : p.size === "small" ? 2 : 1);
+            const cls = [big ? classes.headingLarge : p.size === "small" ? classes.headingSmall : classes.headingMedium, p.size === "display" && "kit-type-display", p.size === "page" && "kit-type-h1", fontClass(p.font)];
+            return (_jsx(Heading, { level: at, className: cls.filter(Boolean).join(" "), children: p.text }));
         }
         case "text":
-            return _jsx(Md, { text: p.text, top: level + 1, className: ["kit-own-text", classes.text].filter(Boolean).join(" ") });
+            return _jsx(Md, { text: p.text, top: level + 1, className: ["kit-own-text", classes.text, fontClass(p.font)].filter(Boolean).join(" ") });
         case "photo":
+            // No photo chosen yet: a quiet box where it will go in CalOS's preview, nothing on the site.
+            if (!p.image)
+                return isDraft() ? _jsx("div", { className: `kit-own-photo-empty kit-own-shape-${p.shape ?? "as-taken"}`, "aria-hidden": "true" }) : null;
             return (_jsxs("figure", { className: "kit-own-photo", children: [_jsx(Img, { src: p.image.src, alt: p.image.alt, sizes: width, ratio: SHAPE[p.shape ?? "as-taken"] }), p.image.caption && _jsx("figcaption", { children: p.image.caption })] }));
         case "button": {
             const quiet = p.style === "quiet";
-            return (_jsx("p", { className: "kit-own-action", children: _jsx("a", { href: p.href, className: (quiet ? classes.buttonQuiet : classes.button) ?? (quiet ? "kit-button kit-button-quiet" : "kit-button"), children: p.label }) }));
+            // One of the business's own button styles, where it names one (kit-btn-3); else the theme's.
+            let vars = {};
+            try {
+                vars = lookValues();
+            }
+            catch {
+                // Drawn without the site's data (a test): only the theme's styles.
+            }
+            const own = buttonStyleClass(p.style, vars);
+            return (_jsx("p", { className: quiet ? "kit-own-action kit-own-action-quiet" : "kit-own-action", children: _jsx("a", { href: p.href, className: [quiet ? classes.buttonQuiet : p.style === "accent" ? `${classes.button} kit-button-accent` : classes.button, own].filter(Boolean).join(" "), children: p.label }) }));
         }
         case "list": {
             const L = p.style === "numbers" ? "ol" : "ul";
             return (_jsx(L, { className: ["kit-own-list", `kit-own-list-${p.style ?? "bullets"}`, classes.text].filter(Boolean).join(" "), children: p.items.map((item, i) => (_jsx("li", { children: item }, i))) }));
         }
+        case "items": {
+            const L = p.numbered === false ? "ul" : "ol";
+            return (_jsx(L, { className: ["kit-own-items", p.lines === false ? "" : "kit-own-items-lines"].filter(Boolean).join(" "), children: p.items.map((it, i) => (_jsxs("li", { children: [p.numbered !== false && (_jsx("span", { className: ["kit-own-items-n", classes.muted].filter(Boolean).join(" "), "aria-hidden": "true", children: String(i + 1).padStart(2, "0") })), _jsxs("div", { children: [_jsx("h3", { className: ["kit-own-items-title", classes.headingMedium, fontClass(p.font)].filter(Boolean).join(" "), children: it.title }), it.text && _jsx("p", { className: ["kit-own-items-text", classes.muted].filter(Boolean).join(" "), children: it.text })] })] }, i))) }));
+        }
         case "quote":
-            return (_jsxs("figure", { className: "kit-own-quote", children: [_jsx("blockquote", { className: classes.text, children: p.text }), p.who && _jsx("figcaption", { children: p.who })] }));
+            return (_jsxs("figure", { className: "kit-own-quote", children: [_jsx("blockquote", { className: [classes.text, fontClass(p.font)].filter(Boolean).join(" "), children: p.text }), p.who && _jsx("figcaption", { className: classes.muted, children: p.who })] }));
         case "stats":
-            return (_jsx("dl", { className: "kit-own-stats", children: p.items.map((it, i) => (_jsxs("div", { children: [_jsx("dt", { children: it.label }), _jsx("dd", { children: it.value })] }, i))) }));
+            return (_jsx("dl", { className: "kit-own-stats", children: p.items.map((it, i) => (_jsxs("div", { children: [_jsx("dt", { className: classes.muted, children: it.label }), _jsx("dd", { className: classes.headingMedium, children: it.value })] }, i))) }));
         case "price":
-            return (_jsxs("p", { className: "kit-own-price", children: [_jsx("span", { className: "kit-own-amount", children: p.amount }), p.per && _jsxs("span", { className: "kit-own-per", children: [" ", p.per] }), p.note && _jsx("span", { className: "kit-own-note", children: p.note })] }));
+            return (_jsxs("p", { className: "kit-own-price", children: [_jsx("span", { className: `kit-own-amount ${classes.headingMedium}`, children: p.amount }), p.per && _jsxs("span", { className: `kit-own-per ${classes.muted}`, children: [" ", p.per] }), p.note && _jsx("span", { className: `kit-own-note ${classes.muted}`, children: p.note })] }));
         case "gallery": {
             const n = Number(p.columns ?? "3");
             return (_jsx("ul", { className: `kit-gallery-grid kit-cols-${n}`, children: p.images.map((img) => (_jsx("li", { children: _jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: `(min-width: 1024px) ${Math.round(100 / (n * columns))}vw, 50vw`, ratio: "1/1" }), img.caption && _jsx("figcaption", { children: img.caption })] }) }, img.src))) }));
@@ -83,5 +164,41 @@ function OwnPart({ p, level, classes, columns }) {
             return (_jsx(Slideshow, { label: "Photos", seconds: p.seconds, className: "kit-shape-landscape", children: p.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: width, eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) }));
         case "space":
             return _jsx("div", { "aria-hidden": "true", className: `kit-own-space kit-own-space-${p.size ?? "medium"}` });
+        case "table":
+            return _jsx(Table, { p: p, level: level, classes: classes });
+        case "icon":
+            return ICONS[p.name] ? _jsx(Icon, { name: p.name, part: true, className: `kit-own-icon kit-own-icon-${p.size ?? "medium"}` }) : null;
+        case "logos":
+            return (_jsxs("div", { className: "kit-own-logos", children: [p.title && _jsx("p", { className: ["kit-own-logos-title", classes.muted].filter(Boolean).join(" "), children: p.title }), _jsx("ul", { children: p.images.map((img, i) => (_jsx("li", { children: _jsx(Img, { src: img.src, alt: img.alt, sizes: "200px" }) }, i))) })] }));
+        case "video": {
+            const embed = p.url ? videoEmbed(p.url) : null;
+            // No address yet (or one that isn't a video's): a quiet box where it will go in CalOS's preview, nothing on the site.
+            if (!embed)
+                return isDraft() ? _jsx("div", { className: "kit-own-video kit-own-video-empty", "aria-hidden": "true" }) : null;
+            return (_jsx("div", { className: "kit-own-video", children: _jsx("iframe", { src: embed.src, title: p.title, width: 1280, height: 720, loading: "lazy", allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen", allowFullScreen: true, referrerPolicy: "strict-origin-when-cross-origin" }) }));
+        }
     }
 }
+/** One of the kit's line icons, drawn inline in the colour of what it's in; beside words, so hidden from a screen reader. */
+function Icon({ name, className, part }) {
+    return (_jsx("svg", { "data-icon": part ? name : undefined, className: className ? `kit-icon ${className}` : "kit-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: ICONS[name].map((d, i) => (_jsx("path", { d: d }, i))) }));
+}
+/** A cell's words, or a tick for "yes" and a dash for "no", each read out as the word. */
+function Cell({ value }) {
+    const v = value.trim().toLowerCase();
+    if (v === "yes" || v === "no")
+        return (_jsxs("span", { className: v === "yes" ? "kit-table-yes" : "kit-table-no", children: [_jsx(Icon, { name: v === "yes" ? "check" : "minus" }), _jsx("span", { className: "kit-sr", children: v === "yes" ? "Yes" : "No" })] }));
+    return _jsx(_Fragment, { children: value });
+}
+/**
+ * Rows compared across a few columns: a table on a wider screen (a heading over each column, each
+ * row's label heading its row), and on a phone each row a small card of its own, its label as its
+ * heading, then each column's heading and the row's cell under it, so nothing is read across a
+ * table too wide to see. One or the other shows (sections.css), never both.
+ */
+function Table({ p, level, classes }) {
+    const heads = p.columns.slice(1);
+    const cells = (r) => heads.map((_, i) => r.cells[i] ?? "");
+    const picked = (i) => (p.highlight === i + 1 ? "kit-table-highlight" : undefined);
+    return (_jsxs("div", { className: "kit-own-table", children: [_jsx("div", { className: "kit-table-wide", children: _jsxs("table", { className: ["kit-table", classes.text].filter(Boolean).join(" "), children: [_jsx("thead", { children: _jsxs("tr", { children: [p.columns[0] ? _jsx("th", { scope: "col", children: p.columns[0] }) : _jsx("td", {}), heads.map((h, i) => (_jsx("th", { scope: "col", className: picked(i), children: h }, i)))] }) }), _jsx("tbody", { children: p.rows.map((r, j) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: r.label }), cells(r).map((c, i) => (_jsx("td", { className: picked(i), children: _jsx(Cell, { value: c }) }, i)))] }, j))) })] }) }), _jsx("ul", { className: "kit-table-cards", children: p.rows.map((r, j) => (_jsxs("li", { className: "kit-table-card", children: [_jsx(Heading, { level: level, className: classes.headingSmall, children: r.label }), _jsx("dl", { className: classes.text || undefined, children: cells(r).map((c, i) => (_jsxs("div", { className: picked(i), children: [_jsx("dt", { children: heads[i] }), _jsx("dd", { children: _jsx(Cell, { value: c }) })] }, i))) })] }, j))) })] }));
+}

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 Site } from "./content/index.ts";
+import type { BehaviorName } from "./tree/index.ts";
 export type PreparedImage = {
     width: number;
     height: number;
@@ -27,6 +28,15 @@ export type Prepared = {
     preferPicture?: boolean;
     /** Where its visits are counted, when CalOS counts them (Caltho's analytics server): finish puts its script in every page. */
     analytics?: Analytics;
+    /** The Look's values as CSS variables (lookVars), for a site with a Look: KitBlocks reads its colours to know a dark background. */
+    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 = {
@@ -35,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,15 +13,31 @@ 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";
+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);
@@ -41,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
@@ -62,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";
@@ -88,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  - ")}`);
@@ -97,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();
@@ -107,15 +137,53 @@ export async function prepare(root, env = process.env, log = console.log) {
     const images = await pictures(site, imagesDir, pub, log);
     const cards = await makeCards(site, definition.share, root, pub, log);
     const preferPicture = !!definition.share && definition.share.prefer === "picture";
-    const prepared = { site, images, csp: definition.csp, cards, ...(preferPicture ? { preferPicture } : {}), ...(editors.length ? { editors } : {}), ...(analytics ? { analytics } : {}) };
+    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 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) {
@@ -217,3 +285,57 @@ async function pushSchema(contentUrl, schemaUrl, token, schema, log) {
         log(`site-kit: warning: couldn't tell CalOS the site's schema (${url}): ${err.message}`);
     }
 }
+/**
+ * The Google fonts the Look uses (a heading or text font that isn't one of the site's own): each
+ * one's files fetched once into public/_fonts, so the site serves them itself, and their
+ * @font-face rules. A file a font doesn't have (no italic at a weight) is skipped; one that can't
+ * be fetched stops the build, rather than a site going out in the wrong font.
+ */
+/**
+ * The fonts the business uploaded in CalOS (fetched with its pictures into content/images/fonts):
+ * copied to public/_fonts/own, served by the site, and their @font-face rules. A file the content
+ * names that isn't there stops the build, as a missing picture does.
+ */
+async function uploadedFontsFor(look, imagesDir, pub, log) {
+    const rules = [];
+    for (const f of look?.uploadedFonts ?? []) {
+        for (const x of f.files) {
+            const from = join(imagesDir, x.src);
+            if (!existsSync(from))
+                throw new Error(`The content names a font file that isn't in content/images: ${x.src}`);
+            const at = join(pub, "_fonts", "own", x.src.slice("fonts/".length));
+            await mkdir(dirname(at), { recursive: true });
+            await writeFile(at, await readFile(from));
+        }
+        rules.push(uploadedFontCss(f, (src) => `/_fonts/own/${src.slice("fonts/".length)}`));
+        log(`site-kit: ${f.family} (uploaded), ${f.files.length} files, served by the site`);
+    }
+    return rules.join("\n");
+}
+async function googleFontsFor(look, o, pub, log) {
+    const own = o.fonts ?? {};
+    const names = [...new Set([look?.headingFont, look?.bodyFont].filter((n) => typeof n === "string" && !(n in own)))];
+    const rules = [];
+    for (const name of names) {
+        const f = googleFont(name);
+        if (!f)
+            continue;
+        const kept = [];
+        for (const x of fontFiles(f)) {
+            const at = join(pub, servedAt(f, x));
+            if (!existsSync(at)) {
+                const res = await fetch(x.url);
+                if (res.status === 404)
+                    continue;
+                if (!res.ok)
+                    throw new Error(`Couldn't fetch ${f.family} (${x.file}): ${res.status}`);
+                await mkdir(dirname(at), { recursive: true });
+                await writeFile(at, new Uint8Array(await res.arrayBuffer()));
+            }
+            kept.push(x);
+        }
+        rules.push(fontFaceCss(f, kept, (x) => servedAt(f, x)));
+        log(`site-kit: ${f.family}, ${kept.length} files, served by the site`);
+    }
+    return rules.join("\n");
+}

package/dist/preview-match.d.ts

@@ -23,3 +23,32 @@ export declare function fieldForImage(value: unknown, base: Path, url: string, i
         url: string;
     }[];
 }>): Path | null;
+/**
+ * Which block drew each of `main`'s drawn children, by the block's index (null: not known). `drawn`:
+ * each child's words, its pictures' alt text included. One drawn for each block pairs them in order.
+ * Otherwise they're found by their words, in order: a block may draw nothing (a list with nothing in
+ * it yet) or more than one (a hero above its rows), and a child without the words to say is left
+ * 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;