@caltho/site-kit 0.2.11 → 0.3.0

package/dist/finish.js

@@ -3,11 +3,13 @@
 // as inline scripts; a static page can't carry a per-request nonce), and Cloudflare Pages' `_headers`
 // and `_redirects` beside the pages. Where CalOS counts its visits, every published page (not the
 // preview) gets the script that sends them, and its phone and map links are marked, so a tap on one
-// is counted too.
+// is counted too; where the site asks first (its consent setting), its banner's script, and nothing
+// counted until a visitor accepts.
 import { createHash } from "node:crypto";
 import { readdir, readFile, writeFile } from "node:fs/promises";
 import { join, relative } from "node:path";
 import { BUILT_IMAGES } from "./preview-match.js";
+import { asksConsent, CONSENT_KEY, consentScript } from "./consent.js";
 import { VIDEO_ORIGINS } from "./sections/index.js";
 import { headersFile, loadRedirects, PREVIEW_PATH } from "./seo.js";
 export async function finish(root, outDir, env = process.env, log = console.log) {
@@ -23,8 +25,12 @@ export async function finish(root, outDir, env = process.env, log = console.log)
         // build made, it shows as built (./next/preview.tsx), from the list it carries.
         const isPreview = relative(outDir, file).replace(/(\/index)?\.html$/, "") === PREVIEW_PATH.slice(1);
         // Before the hashing: its own little script is named in the policy like any other.
+        // A site that asks first: its banner's script, and its visits counted only once accepted.
+        const asks = asksConsent(site);
+        if (asks && !isPreview)
+            html = html.replace(/<\/body>/i, () => `<script>${consentScript()}</script></body>`);
         if (prepared.analytics && !isPreview)
-            html = counted(html, prepared.analytics);
+            html = counted(html, prepared.analytics, asks);
         const scripts = new Set();
         const styles = new Set();
         for (const m of html.matchAll(/<script\b([^>]*)>([\s\S]*?)<\/script>/gi)) {
@@ -41,7 +47,11 @@ export async function finish(root, outDir, env = process.env, log = console.log)
         const directives = {
             "default-src": ["'self'"],
             "script-src": ["'self'", ...[...scripts].map((h) => `'${h}'`), ...(prepared.analytics && !isPreview ? [new URL(prepared.analytics.script).origin] : [])],
-            "style-src": ["'self'", ...[...styles].map((h) => `'${h}'`)],
+            // The preview draws built sections' classes as they're typed with Tailwind's browser build, which
+            // writes them into a <style> of its own: inline styles are allowed there (with no hashes, which
+            // would turn that off), and only there. It's framed only by the business's CalOS addresses, and
+            // draws only classes the kit's checker allows.
+            "style-src": isPreview ? ["'self'", "'unsafe-inline'"] : ["'self'", ...[...styles].map((h) => `'${h}'`)],
             "img-src": ["'self'", "data:"],
             // The preview may show a Google font just chosen, from Fontsource's CDN, until the next build serves it.
             // So may a font the business uploaded, from CalOS (the editor's origin).
@@ -82,9 +92,12 @@ export async function finish(root, outDir, env = process.env, log = console.log)
  * out, and what's marked to count), and each phone link and map link marked: a call or directions
  * tapped is what a business wants to know came from the site. No cookies: nothing to consent to.
  */
-export function counted(html, a) {
+export function counted(html, a, asks = false) {
     const init = `window.op=window.op||function(){(window.op.q=window.op.q||[]).push(arguments)};window.op("init",${JSON.stringify({ apiUrl: a.api, clientId: a.client, trackScreenViews: true, trackOutgoingLinks: true, trackAttributes: true })});`;
-    const tags = `<script>${init}</script><script src="${a.script}" defer async></script>`;
+    // Asking first (the site's consent setting): nothing starts, and the counter isn't even loaded,
+    // until the visitor has accepted, now or on an earlier visit.
+    const gated = `(()=>{let on=false;const go=()=>{if(on)return;on=true;${init}const s=document.createElement("script");s.src=${JSON.stringify(a.script)};s.async=true;document.head.appendChild(s)};try{if(localStorage.getItem(${JSON.stringify(CONSENT_KEY)})==="yes")go()}catch{}addEventListener("kit:consent",(e)=>{if(e.detail==="yes")go()})})();`;
+    const tags = asks ? `<script>${gated}</script>` : `<script>${init}</script><script src="${a.script}" defer async></script>`;
     html = html.replace(/<\/head>/i, () => `${tags}</head>`);
     return html.replace(/<a\b([^>]*)>/gi, (tag, attrs) => {
         if (/\sdata-track\s*=/i.test(attrs))

package/dist/frame.test.js

@@ -30,4 +30,29 @@ describe("the kit's frame", () => {
         expect(own).toMatch(/<header class="mine">/);
         expect(own).not.toMatch(/kit-header|kit-footer/);
     });
+    it("draws a header and footer the business built (ownHeader, ownFooter) in place of the kit's, its links to the page it's on marked", () => {
+        const header = {
+            root: {
+                id: "hdrroot001",
+                tag: "header",
+                class: "flex items-center justify-between",
+                children: [
+                    { id: "hdrlogo001", tag: "a", href: "/", text: "Acme" },
+                    { id: "hdrnav0001", tag: "nav", children: [
+                            { id: "hdrlink001", tag: "a", href: "/services/", text: "Services", class: "aria-current:underline" },
+                            { id: "hdrlink002", tag: "a", href: "/about/", text: "About" },
+                        ] },
+                ],
+            },
+        };
+        const footer = { root: { id: "ftrroot001", tag: "footer", class: "py-10", children: [{ id: "ftrtext001", tag: "p", text: "© Acme" }] } };
+        const html = renderToStaticMarkup(_jsx(KitFrame, { site: { ...site, ownHeader: header, ownFooter: footer }, current: "/services/walnut/", look: {}, children: "x" }));
+        expect(html).not.toMatch(/kit-header|kit-footer/);
+        expect(html).toMatch(/<header class="kit:flex kit:items-center kit:justify-between"[^>]*data-kit-built/);
+        // The page under Services marks Services; home and About aren't.
+        expect(html).toMatch(/href="\/services\/" aria-current="page"/);
+        expect(html).not.toMatch(/href="\/" aria-current/);
+        expect(html).not.toMatch(/href="\/about\/" aria-current/);
+        expect(html).toMatch(/<footer class="kit:py-10"[^>]*>.*© Acme/);
+    });
 });

package/dist/next/built.d.ts

@@ -0,0 +1,40 @@
+import { type ImageRef } from "../tree/index.ts";
+import type { KitBlock } from "./sections.tsx";
+/** What a slot of a component is filled with where it's used. */
+type Fill = {
+    text?: string;
+    href?: string;
+    image?: ImageRef;
+};
+/** A built section: its tree, the block's id and Layout on its root. */
+export declare function BuiltSection({ s }: {
+    s: KitBlock;
+}): import("react").JSX.Element | null;
+/** A component used by name, its slots filled; nothing (a quiet box in the preview) when the site has no such component. */
+export declare function UseSection({ s }: {
+    s: KitBlock;
+}): import("react").JSX.Element | null;
+/**
+ * One of the site's components drawn outside a page's blocks (a cookie banner's design): its slots
+ * filled, the kit's attributes on the elements of the slots named in `marks`. Nothing for a
+ * component the site hasn't.
+ */
+export declare function ComponentTree({ name, slots, marks }: {
+    name: string;
+    slots: Record<string, Fill>;
+    marks?: Record<string, Record<string, string>>;
+}): import("react").JSX.Element | null;
+/**
+ * The site's own header or footer (content's ownHeader, ownFooter): its tree drawn as a built
+ * section's, its links to the page it's on marked (aria-current).
+ */
+export declare function BuiltFrame({ tree, current, which }: {
+    tree: {
+        root?: unknown;
+    };
+    current: string;
+    which?: "header" | "footer";
+}): import("react").JSX.Element | null;
+/** A bound value as a link: an email address is a mailto:, a phone number a tel: (dialled as its digits), anything else as it is. */
+export declare function linkFor(v: string): string;
+export {};

package/dist/next/built.js

@@ -0,0 +1,318 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// A built section drawn (cal-os docs/design/site-builder.md): a tree of elements, each its tag with
+// its Tailwind classes, as the business (or Cal) made it in CalOS. And a component used by name, its
+// slots filled. Drawn by KitSection like the kit's other sections, on the server for the published
+// page and in the browser for CalOS's preview, with no hooks, so it's the same in both.
+//
+// Nothing in a tree is drawn unchecked, whatever the content says: a tag outside the list is left
+// out, a class that isn't allowed is dropped (safeClasses), a link that isn't a page, a part, an
+// http(s), mailto: or tel: address goes nowhere, a picture is one of the site's own through the
+// kit's images, a video is the kit's own player address built from a provider and an id, and words
+// are light Markdown whose HTML is shown as text. Classes are drawn prefixed (kit:p-4), so the CSS
+// made for them (../built/css.ts) touches nothing else on the site.
+//
+// In CalOS's preview each element carries its node's id (data-node), so a click names the node
+// exactly; the published page never does. A published page links the CSS made for built sections
+// and the scripts of the behaviors it uses, once each however many sections use them (React puts
+// them in the head); the preview draws classes with Tailwind's browser build and runs behaviors
+// itself (./preview.tsx).
+import { THIS_ITEM } from "../content/lists.js";
+import { placementClass } from "../content/index.js";
+import { mdInline } from "../markdown.js";
+import { BEHAVIOR_ATTR, SETTINGS_ATTR } from "../behaviors/index.js";
+import { nodeClasses, readPath } from "../built/tree.js";
+import { ICONS } from "../sections/icons.js";
+import { imageRef, LIMITS, NODE_ATTR, safeHref, TAGS, VOID_TAGS } from "../tree/index.js";
+import { isDraft, prepared } from "./data.js";
+import { Img } from "./parts/Img.js";
+const ALLOWED = new Set(TAGS);
+const VIDEO_ID = /^[\w-]{6,20}$/;
+const CONTROLS = new Set(["prev", "next", "dots", "pause"]);
+/** Where the published page gets built sections' CSS and behaviors' scripts (prepare writes them; none before it has). */
+function assetsOf() {
+    try {
+        return prepared().built ?? {};
+    }
+    catch {
+        return {};
+    }
+}
+function contentOf() {
+    try {
+        return prepared().site;
+    }
+    catch {
+        return {};
+    }
+}
+/** A built section: its tree, the block's id and Layout on its root. */
+export function BuiltSection({ s }) {
+    const root = s.root;
+    if (!root || typeof root !== "object")
+        return null;
+    return _jsx(Drawn, { root: root, block: s, ctx: { site: contentOf(), self: s[THIS_ITEM], preview: isDraft(), behaviors: new Set() } });
+}
+/** A component used by name, its slots filled; nothing (a quiet box in the preview) when the site has no such component. */
+export function UseSection({ s }) {
+    const site = contentOf();
+    const c = (site.components ?? []).find((x) => x?.key === s.component);
+    if (!c)
+        return isDraft() ? _jsx("div", { className: "kit-built-missing", "aria-hidden": "true" }) : null;
+    const slots = (s.slots && typeof s.slots === "object" ? s.slots : {});
+    return _jsx(Drawn, { root: c.root, block: s, ctx: { site, self: s[THIS_ITEM], slots, preview: isDraft(), behaviors: new Set() } });
+}
+/**
+ * One of the site's components drawn outside a page's blocks (a cookie banner's design): its slots
+ * filled, the kit's attributes on the elements of the slots named in `marks`. Nothing for a
+ * component the site hasn't.
+ */
+export function ComponentTree({ name, slots, marks }) {
+    const site = contentOf();
+    const c = (site.components ?? []).find((x) => x?.key === name);
+    if (!c)
+        return null;
+    return _jsx(Drawn, { root: c.root, block: { type: "use" }, ctx: { site, slots, marks, preview: isDraft(), behaviors: new Set() } });
+}
+/**
+ * The site's own header or footer (content's ownHeader, ownFooter): its tree drawn as a built
+ * section's, its links to the page it's on marked (aria-current).
+ */
+export function BuiltFrame({ tree, current, which }) {
+    const root = tree.root;
+    if (!root || typeof root !== "object")
+        return null;
+    return _jsx(Drawn, { root: root, block: { type: "built" }, ctx: { site: contentOf(), preview: isDraft(), behaviors: new Set(), current }, mark: { "data-kit-frame": which ?? (root.tag === "footer" ? "footer" : "header") } });
+}
+/** The tree, and on the published page what it needs loaded: the CSS and its behaviors' scripts. */
+function Drawn({ root, block, ctx, mark }) {
+    const top = { attrs: { id: block.id, "data-kit-built": "", ...mark }, placement: placementClass(block) };
+    const drawn = expand([root], ctx).map((it, i) => draw(it.node, it.ctx, 1, i === 0 ? { attrs: top.attrs } : { attrs: { "data-kit-built": "" } }, top.placement, it.key));
+    if (ctx.preview)
+        return _jsx(_Fragment, { children: drawn });
+    const assets = assetsOf();
+    return (_jsxs(_Fragment, { children: [assets.css && _jsx("link", { rel: "stylesheet", href: assets.css, precedence: "kit-built" }), [...ctx.behaviors].map((name) => (assets.scripts?.[name] ? _jsx("script", { async: true, src: assets.scripts[name] }, name) : null)), drawn] }));
+}
+/** A list of nodes as drawn: hidden ones left out, a repeated one once for each item of its list. */
+function expand(list, ctx) {
+    const out = [];
+    for (const n of list ?? []) {
+        if (!n || typeof n !== "object" || n.hidden)
+            continue;
+        if (n.repeat) {
+            const items = readPath(n.repeat.path, ctx.site, ctx.item, ctx.self);
+            if (!Array.isArray(items))
+                continue;
+            items.slice(0, Math.min(n.repeat.limit ?? 100, 100)).forEach((item, i) => out.push({ node: n, ctx: { ...ctx, item }, key: `${n.id}-${i}` }));
+        }
+        else
+            out.push({ node: n, ctx, key: n.id });
+    }
+    return out;
+}
+/** A node's words, link and picture: what its slot is filled with, else what it's bound to, else its own. */
+/** A form field's id on the page, from its node's: a label names it by this. */
+const fieldId = (nodeId) => `kit-f-${nodeId}`;
+/** What the browser fills in for a field, by the name its answer is sent as. */
+const AUTOCOMPLETE = { name: "name", first_name: "given-name", last_name: "family-name", email: "email", phone: "tel", company: "organization", business: "organization" };
+/**
+ * Where a form sends: the business's form it names (its key, among the addresses CalOS gave the
+ * site: `forms`), or, naming none, the site's own (its content's `form`). Only an http(s) address,
+ * else none: a form naming one the site wasn't given isn't sent anywhere else.
+ */
+function formAddress(site, sendTo) {
+    const s = site && typeof site === "object" ? site : {};
+    const f = sendTo ? (s.forms && typeof s.forms === "object" ? s.forms[sendTo] : undefined) : s.form;
+    return typeof f === "string" && /^https?:\/\/\S+$/i.test(f) ? f : null;
+}
+/** A bound value as a link: an email address is a mailto:, a phone number a tel: (dialled as its digits), anything else as it is. */
+export function linkFor(v) {
+    const s = v.trim();
+    if (/^[^\s@/:]+@[^\s@/]+\.[^\s@/]+$/.test(s))
+        return `mailto:${s}`;
+    if (/^\+?[\d\s().-]{7,}$/.test(s) && /\d{7,}/.test(s.replace(/\D/g, "")))
+        return `tel:${s.startsWith("+") ? "+" : ""}${s.replace(/\D/g, "")}`;
+    return s;
+}
+function valuesOf(n, ctx) {
+    let text = n.text;
+    let href = n.href;
+    let image = n.image;
+    if (n.bind) {
+        const v = readPath(n.bind.path, ctx.site, ctx.item, ctx.self);
+        const as = n.bind.as ?? (v && typeof v === "object" ? "image" : n.tag === "img" ? "image" : "text");
+        if (as === "image" && v && typeof v === "object")
+            image = v;
+        else if (as === "href" && typeof v === "string")
+            href = linkFor(v);
+        else if (as === "text" && (typeof v === "string" || typeof v === "number"))
+            text = String(v);
+    }
+    const fill = n.slot ? ctx.slots?.[n.slot] : undefined;
+    if (fill) {
+        if (typeof fill.text === "string")
+            text = fill.text;
+        if (typeof fill.href === "string")
+            href = fill.href;
+        if (fill.image)
+            image = fill.image;
+    }
+    return { text, href: href && safeHref.safeParse(href).success ? href : undefined, image: image && imageRef.safeParse(image).success ? imageRef.parse(image) : undefined };
+}
+/** One node drawn as its element, its children after it, with whatever its behavior adds. */
+function draw(n, ctx, depth, extra = {}, kitClass, key) {
+    if (depth > LIMITS.depth || !ALLOWED.has(n.tag))
+        return null;
+    const { text, href, image } = valuesOf(n, ctx);
+    const className = [kitClass, ...nodeClasses(n)].filter(Boolean).join(" ") || undefined;
+    const attrs = { className, ...(ctx.preview ? { [NODE_ATTR]: n.id } : {}), ...(n.label ? { "aria-label": n.label } : {}), ...(n.slot ? ctx.marks?.[n.slot] : {}), ...extra.attrs };
+    // An item a filter chooses between: its value of the filter's field, as the filter matches words.
+    if (n.repeat && ctx.filterField && ctx.item && typeof ctx.item === "object") {
+        const v = ctx.item[ctx.filterField];
+        attrs["data-kit-filter-value"] = String(v ?? "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+    }
+    const b = n.behavior;
+    if (b) {
+        ctx.behaviors.add(b.name);
+        const { name, ...settings } = b;
+        attrs[BEHAVIOR_ATTR] = name;
+        if (Object.keys(settings).length)
+            attrs[SETTINGS_ATTR] = JSON.stringify(settings);
+        if (b.name === "reveal")
+            attrs["data-kit-effect"] = b.effect ?? "up";
+    }
+    switch (n.tag) {
+        case "img":
+            if (!image)
+                return null;
+            return _jsx(Img, { src: image.src, alt: image.alt ?? "", phoneSrc: image.phoneSrc, sizes: "(min-width: 1200px) 1200px, 100vw", className: className, node: ctx.preview ? n.id : undefined }, key);
+        case "icon": {
+            const paths = n.icon && Object.prototype.hasOwnProperty.call(ICONS, n.icon) ? ICONS[n.icon] : null;
+            if (!paths)
+                return null;
+            return (_jsx("svg", { ...attrs, className: ["kit-built-icon", className].filter(Boolean).join(" "), viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": n.label ? undefined : true, role: n.label ? "img" : undefined, focusable: "false", children: paths.map((d, i) => (_jsx("path", { d: d }, i))) }, key));
+        }
+        case "video": {
+            const v = n.video;
+            if (!v || !VIDEO_ID.test(v.id) || (v.provider !== "youtube" && v.provider !== "vimeo"))
+                return null;
+            // The kit's own player addresses, as an own section's video part uses: YouTube's no-cookie one, Vimeo's with tracking off.
+            const src = v.provider === "youtube" ? `https://www.youtube-nocookie.com/embed/${v.id}` : /^\d+$/.test(v.id) ? `https://player.vimeo.com/video/${v.id}?dnt=1` : null;
+            if (!src)
+                return null;
+            return _jsx("iframe", { ...attrs, src: src, title: n.label ?? n.name ?? "Video", width: 1280, height: 720, loading: "lazy", allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen", allowFullScreen: true, referrerPolicy: "strict-origin-when-cross-origin" }, key);
+        }
+        // A form's parts: plain HTML, sent by the browser with no script to the business's form it names
+        // (or the site's own, its content's `form`), never an address in the tree. Each field's id is its node's, so a
+        // label names it; the kit adds the spam trap a person never fills in. Without the address (not set
+        // yet), it's drawn but can't be sent: a box, not a form.
+        case "form": {
+            const action = formAddress(ctx.site, n.sendTo);
+            const inner = expand(n.children, { ...ctx, inForm: true }).map((k, i) => draw(k.node, k.ctx, depth + 1, {}, undefined, `${k.key}-${i}`));
+            if (!action)
+                return _jsx("div", { ...attrs, "data-kit-form-unset": "", children: inner }, key);
+            return (_jsxs("form", { ...attrs, method: "post", action: action, children: [inner, _jsx("div", { className: "kit-trap", "aria-hidden": "true", children: _jsxs("label", { children: ["Leave this empty", _jsx("input", { name: "_website", type: "text", tabIndex: -1, autoComplete: "off" })] }) })] }, key));
+        }
+        case "input": {
+            const f = n.field;
+            if (!f)
+                return null;
+            const type = f.type ?? "text";
+            const choice = type === "checkbox" || type === "radio";
+            return _jsx("input", { ...attrs, id: fieldId(n.id), name: f.name, type: type, required: f.required || undefined, placeholder: choice ? undefined : f.placeholder, value: choice ? (f.value ?? "yes") : undefined, defaultChecked: (choice && f.checked) || undefined, autoComplete: AUTOCOMPLETE[f.name] }, key);
+        }
+        case "textarea": {
+            const f = n.field;
+            if (!f)
+                return null;
+            return _jsx("textarea", { ...attrs, id: fieldId(n.id), name: f.name, rows: f.rows ?? 5, required: f.required || undefined, placeholder: f.placeholder }, key);
+        }
+        case "select": {
+            const f = n.field;
+            if (!f)
+                return null;
+            return (_jsxs("select", { ...attrs, id: fieldId(n.id), name: f.name, required: f.required || undefined, defaultValue: "", children: [f.placeholder && (_jsx("option", { value: "", disabled: true, children: f.placeholder })), (n.children ?? []).filter((c) => c.tag === "option").map((c) => (_jsx("option", { value: c.text ?? "", children: c.text ?? "" }, c.id)))] }, key));
+        }
+        case "option":
+            return null; // drawn by its list of choices
+        case "hr":
+        case "br": {
+            const Void = n.tag;
+            return _jsx(Void, { ...attrs }, key);
+        }
+    }
+    // A link: checked again (valuesOf), opened in a new tab only for an outside address. A button with
+    // a link goes there (drawn as a link); without one, it's a button that does nothing by itself (a
+    // behavior's control, a tab).
+    let Tag = n.tag;
+    if (n.tag === "a" || (n.tag === "button" && href)) {
+        Tag = "a";
+        if (href)
+            attrs.href = href;
+        // A link to the page it's on (or, past home, to a page above it) says so: designs style it with aria-[current=page]:.
+        const here = ctx.current && href ? href.split("#")[0].replace(/\/?$/, "/") : null;
+        const at = ctx.current?.replace(/\/?$/, "/");
+        if (here && at && !href.startsWith("#") && (here === at || (here !== "/" && at.startsWith(here))))
+            attrs["aria-current"] = "page";
+        if (href && n.external && /^https?:/i.test(href))
+            Object.assign(attrs, { target: "_blank", rel: "noopener noreferrer" });
+    }
+    else if (n.tag === "button")
+        attrs.type = ctx.inForm ? "submit" : "button";
+    if (n.tag === "label" && n.for)
+        attrs.htmlFor = fieldId(n.for);
+    const words = text ? _jsx("span", { dangerouslySetInnerHTML: { __html: mdInline(text) } }) : null;
+    // A filter's items are marked with their value of its field, wherever they're repeated inside it.
+    const kids = expand(n.children, b?.name === "filter" ? { ...ctx, filterField: b.field } : ctx);
+    let inner;
+    if (b?.name === "carousel")
+        inner = carouselInner(n, b, kids, depth, attrs);
+    else if (b?.name === "marquee") {
+        const row = kids.map((k, i) => draw(k.node, k.ctx, depth + 1, {}, undefined, `${k.key}-${i}`));
+        inner = (_jsxs("div", { className: "kit-marquee-track", "data-kit-track": "", children: [_jsx("div", { className: "kit-marquee-group", children: row }), _jsx("div", { className: "kit-marquee-group", "data-kit-copy": "", "aria-hidden": "true", inert: true, children: kids.map((k, i) => draw(k.node, k.ctx, depth + 1, {}, undefined, `${k.key}-copy-${i}`)) })] }));
+    }
+    else {
+        const childAttrs = (i) => {
+            if (extra.child)
+                return extra.child(i);
+            if (b?.name === "tabs")
+                return i === 0 ? { "data-kit-tablist": "" } : { "data-kit-panel": "" };
+            return undefined;
+        };
+        inner = kids.map((k, i) => {
+            // An accordion's item: its first child the heading that opens it, the rest what it opens.
+            const item = b?.name === "accordion" ? { attrs: { "data-kit-item": "" }, child: (j) => (j === 0 ? { "data-kit-head": "" } : { "data-kit-body": "" }) } : { attrs: childAttrs(i) };
+            return draw(k.node, k.ctx, depth + 1, item, undefined, `${k.key}-${i}`);
+        });
+    }
+    if (VOID_TAGS.includes(n.tag))
+        return null;
+    // Words alone are the element's own content; with children too, the words come first.
+    if (words && !kids.length && !extra.inner && b?.name !== "carousel")
+        return _jsx(Tag, { ...attrs, dangerouslySetInnerHTML: { __html: mdInline(text) } }, key);
+    return (_jsxs(Tag, { ...attrs, children: [words, inner, extra.inner] }, key));
+}
+/**
+ * A carousel's inside: its slides (its children, but for any marked as its controls: prev, next,
+ * dots) in a track, the first shown; its own controls where they are; and the kit's (dots, arrows,
+ * a stop button where it moves by itself) where the design has none. The controls show only once
+ * its script has started (sections.css): without it, the first slide alone.
+ */
+function carouselInner(n, b, kids, depth, attrs) {
+    const slides = kids.filter((k) => !(k.node.slot && CONTROLS.has(k.node.slot)));
+    const controls = kids.filter((k) => k.node.slot && CONTROLS.has(k.node.slot));
+    const count = slides.length;
+    Object.assign(attrs, { role: "region", "aria-roledescription": "carousel", "aria-label": n.label ?? n.name ?? "Slides" });
+    const dots = (className) => slides.map((_, i) => _jsx("button", { type: "button", className: className, "data-kit-to": String(i), "aria-label": `Show slide ${i + 1} of ${count}`, "aria-current": i === 0 ? "true" : "false" }, i));
+    const has = (slot) => controls.some((c) => c.node.slot === slot);
+    const kitDots = b.dots !== false && !has("dots") && count > 1;
+    const kitArrows = b.arrows === true && !has("prev") && !has("next") && count > 1;
+    const arrow = (dir) => (_jsx("button", { type: "button", className: `kit-carousel-arrow kit-carousel-${dir}`, [`data-kit-${dir}`]: "", "aria-label": dir === "prev" ? "Previous slide" : "Next slide", children: _jsx("svg", { className: "kit-built-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: ICONS["arrow-right"].map((d, i) => (_jsx("path", { d: d }, i))) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "kit-carousel-track", "data-kit-track": "", "data-kit-transition": b.transition ?? "fade", children: slides.map((k, i) => draw(k.node, k.ctx, depth + 1, { attrs: { "data-kit-slide": "", "data-active": i === 0 ? "" : undefined, role: "group", "aria-roledescription": "slide", "aria-label": `${i + 1} of ${count}` } }, undefined, `${k.key}-${i}`)) }), controls.map((k, i) => k.node.slot === "dots"
+                ? draw({ ...k.node, children: [], text: undefined }, k.ctx, depth + 1, { inner: dots("kit-carousel-dot") }, undefined, `${k.key}-${i}`)
+                : k.node.slot === "pause"
+                    ? // The design's own place for the stop button (where it moves by itself): the kit's bars, or play once stopped, inside it.
+                        b.seconds && count > 1
+                            ? draw({ ...k.node, children: [], text: undefined }, k.ctx, depth + 1, { attrs: { "data-kit-pause": "", "aria-pressed": "false", "aria-label": k.node.label ?? "Pause the slides" }, inner: _jsx("span", { "data-kit-pause-icon": "", "aria-hidden": "true" }) }, undefined, `${k.key}-${i}`)
+                            : null
+                    : draw(k.node, k.ctx, depth + 1, { attrs: { [`data-kit-${k.node.slot}`]: "", "aria-label": k.node.label ?? (k.node.slot === "prev" ? "Previous slide" : "Next slide") } }, undefined, `${k.key}-${i}`)), (kitDots || kitArrows || (b.seconds && count > 1 && !has("pause"))) && (_jsxs("div", { className: "kit-carousel-controls", children: [b.seconds && !has("pause") && (_jsx("button", { type: "button", className: "kit-carousel-pause", "data-kit-pause": "", "aria-pressed": "false", "aria-label": "Pause the slides", children: _jsx("span", { "aria-hidden": "true" }) })), kitArrows && arrow("prev"), kitDots && dots("kit-carousel-dot"), kitArrows && arrow("next")] }))] }));
+}

package/dist/next/consent.d.ts

@@ -0,0 +1,4 @@
+import type { Site } from "../content/index.ts";
+export declare function KitConsent({ site }: {
+    site: Pick<Site, "consent">;
+}): import("react").JSX.Element | null;

package/dist/next/consent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { asksConsent } from "../consent.js";
+import { ComponentTree } from "./built.js";
+import { isDraft } from "./data.js";
+import { Md } from "./parts/Md.js";
+export function KitConsent({ site }) {
+    if (!asksConsent(site))
+        return null;
+    const c = site.consent;
+    const place = c.place ?? "bottom";
+    const words = { text: c.text, accept: c.accept ?? "Accept", decline: c.decline ?? "Decline" };
+    return (_jsx("div", { className: `kit-consent kit-consent-${place}${c.design ? " kit-consent-own" : ""}`, "data-kit-consent-banner": "", role: "region", "aria-label": "Cookie choices", hidden: !isDraft(), children: c.design ? (_jsx(ComponentTree, { name: c.design, slots: { text: { text: words.text }, accept: { text: words.accept }, decline: { text: words.decline }, ...(c.policy ? { policy: { text: c.policy.label, href: c.policy.href } } : {}) }, marks: { accept: { "data-kit-consent": "accept" }, decline: { "data-kit-consent": "decline" } } })) : (_jsxs("div", { className: "kit-consent-box", children: [_jsx(Md, { text: words.text, className: "kit-consent-text" }), _jsxs("div", { className: "kit-consent-actions", children: [c.policy && (_jsx("a", { className: "kit-consent-policy", href: c.policy.href, children: c.policy.label })), _jsx("button", { type: "button", className: "kit-button kit-button-quiet", "data-kit-consent": "decline", children: words.decline }), _jsx("button", { type: "button", className: "kit-button", "data-kit-consent": "accept", children: words.accept })] })] })) }));
+}

package/dist/next/data.d.ts

@@ -2,8 +2,8 @@ import type { Page } from "../content/index.ts";
 import type { Prepared, PreparedImage } from "../prepare.ts";
 /** Where the server reads the prepared content from (./data-fs.ts). */
 export declare function loadPreparedWith(load: () => Prepared): void;
-/** Puts content in the store: CalOS's preview, with the draft it's editing. */
-export declare function setPrepared(p: Prepared): void;
+/** Puts content in the store: CalOS's preview, with the draft it's editing (`draft`: false for content as published, as a test draws it). */
+export declare function setPrepared(p: Prepared, draft?: boolean): void;
 /** Whether what's drawn is a draft in CalOS's preview (a part with nothing in it yet shows where it goes). */
 export declare const isDraft: () => boolean;
 export declare function prepared(): Prepared;

package/dist/next/data.js

@@ -2,6 +2,7 @@
 // `.site/prepared.json` (./data-fs.ts, which the server entry loads) and in CalOS's preview by the
 // draft CalOS sends (./preview.tsx). Components read it the same way in both, so one set of
 // components draws the published site and the draft being edited.
+import { allPages } from "../content/lists.js";
 let current = null;
 let loader = null;
 /** Where the server reads the prepared content from (./data-fs.ts). */
@@ -10,10 +11,10 @@ export function loadPreparedWith(load) {
 }
 /** Whether the store holds a draft from CalOS's preview, rather than a build's content. */
 let drafting = false;
-/** Puts content in the store: CalOS's preview, with the draft it's editing. */
-export function setPrepared(p) {
+/** Puts content in the store: CalOS's preview, with the draft it's editing (`draft`: false for content as published, as a test draws it). */
+export function setPrepared(p, draft = true) {
     current = p;
-    drafting = true;
+    drafting = draft;
 }
 /** Whether what's drawn is a draft in CalOS's preview (a part with nothing in it yet shows where it goes). */
 export const isDraft = () => drafting;
@@ -47,5 +48,6 @@ export function image(src) {
 /** The page at a catch-all route's segments (`[[...path]]`), or null. */
 export function pageAt(path) {
     const at = path?.length ? `/${path.join("/")}${site().trailingSlash === false ? "" : "/"}` : "/";
-    return site().pages.find((p) => p.path === at) ?? null;
+    // A page of the site, else an item of one of its lists at its page's address.
+    return allPages(site()).find((p) => p.path === at) ?? null;
 }

package/dist/next/frame.d.ts

@@ -4,6 +4,13 @@ import { type Business, type LookOptions, type Site } from "../content/index.ts"
 export type FrameSite = Pick<Site, "pages" | "menu" | "footer"> & {
     business: Business;
     look?: unknown;
+    consent?: Site["consent"]; /** A header or footer built as a tree, in place of the kit's. */
+    ownHeader?: {
+        root?: unknown;
+    };
+    ownFooter?: {
+        root?: unknown;
+    };
 };
 /**
  * The top of every page: the business's logo or name (home), the menu, and the one thing most
@@ -22,7 +29,8 @@ export declare function KitFooter({ site }: {
 }): import("react").JSX.Element;
 /**
  * A whole page's frame: skip to the content, the header, the page in `main`, the footer. The kit's
- * header and footer unless the site passes its own (`header`, `footer`: null leaves one out).
+ * header and footer unless the site passes its own (`header`, `footer`: null leaves one out), or its
+ * content has one built (ownHeader, ownFooter: made in CalOS like a built section).
  */
 export declare function KitFrame({ site, current, look, header, footer, children }: {
     site: FrameSite;

package/dist/next/frame.js

@@ -13,6 +13,8 @@ const lookOf = () => {
 import { hoursLines } from "../seo.js";
 import { KitMenuGroup } from "./menu-group.js";
 import { Img } from "./parts/Img.js";
+import { KitConsent } from "./consent.js";
+import { BuiltFrame } from "./built.js";
 const PATHS = {
     phone: "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z",
     mail: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm18 2-10 7L2 6",
@@ -63,8 +65,9 @@ export function KitFooter({ site }) {
 }
 /**
  * A whole page's frame: skip to the content, the header, the page in `main`, the footer. The kit's
- * header and footer unless the site passes its own (`header`, `footer`: null leaves one out).
+ * header and footer unless the site passes its own (`header`, `footer`: null leaves one out), or its
+ * content has one built (ownHeader, ownFooter: made in CalOS like a built section).
  */
 export function KitFrame({ site, current, look, header, footer, children }) {
-    return (_jsxs(_Fragment, { children: [_jsx("a", { className: "kit-skip", href: "#main", children: "Skip to content" }), header === undefined ? _jsx(KitHeader, { site: site, current: current, look: look }) : header, _jsx("main", { id: "main", tabIndex: -1, children: children }), footer === undefined ? _jsx(KitFooter, { site: site }) : footer] }));
+    return (_jsxs(_Fragment, { children: [_jsx("a", { className: "kit-skip", href: "#main", children: "Skip to content" }), header !== undefined ? header : site.ownHeader?.root ? _jsx(BuiltFrame, { tree: site.ownHeader, current: current, which: "header" }) : _jsx(KitHeader, { site: site, current: current, look: look }), _jsx("main", { id: "main", tabIndex: -1, children: children }), footer !== undefined ? footer : site.ownFooter?.root ? _jsx(BuiltFrame, { tree: site.ownFooter, current: current, which: "footer" }) : _jsx(KitFooter, { site: site }), _jsx(KitConsent, { site: site })] }));
 }

package/dist/next/index.d.ts

@@ -10,3 +10,5 @@ export { KIT_CLASSES, KitSection, type KitBlock, type KitClasses } from "./secti
 export { Slideshow } from "./slideshow.tsx";
 export { KitFooter, KitFrame, KitHeader, type FrameSite } from "./frame.tsx";
 export { KitMenuGroup } from "./menu-group.tsx";
+export { KitConsent } from "./consent.tsx";
+export { BuiltSection, ComponentTree, UseSection } from "./built.tsx";

package/dist/next/index.js

@@ -13,3 +13,5 @@ export { KIT_CLASSES, KitSection } from "./sections.js";
 export { Slideshow } from "./slideshow.js";
 export { KitFooter, KitFrame, KitHeader } from "./frame.js";
 export { KitMenuGroup } from "./menu-group.js";
+export { KitConsent } from "./consent.js";
+export { BuiltSection, ComponentTree, UseSection } from "./built.js";

package/dist/next/metadata.js

@@ -1,5 +1,6 @@
 // The Next.js side of search: each page's metadata, the static routes, robots.txt and the sitemap,
 // all from the prepared content.
+import { allPages } from "../content/lists.js";
 import { shareImageOf } from "../images.js";
 import { canonical, fullTitle } from "../seo.js";
 import { image, prepared, site } from "./data.js";
@@ -34,12 +35,12 @@ export function pageMetadata(page) {
 }
 /** For `generateStaticParams` on `app/[[...path]]/page.tsx`. */
 export function staticParams() {
-    return site().pages.map((p) => ({ path: p.path.split("/").filter(Boolean) }));
+    return allPages(site()).map((p) => ({ path: p.path.split("/").filter(Boolean) }));
 }
 export function robots() {
     return { rules: { userAgent: "*", allow: "/" }, sitemap: canonical(site(), "/sitemap.xml") };
 }
 export function sitemap() {
     const s = site();
-    return s.pages.filter((p) => !p.noindex).map((p) => ({ url: canonical(s, p.path) }));
+    return allPages(s).filter((p) => !p.noindex).map((p) => ({ url: canonical(s, p.path) }));
 }

package/dist/next/parts/Img.d.ts

@@ -1,9 +1,14 @@
 export type Ratio = "1/1" | "3/2" | "4/3" | "4/5" | "16/9";
-export declare function Img({ src, alt, sizes, ratio, eager, 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 declare const PHONE_WIDTH = 700;
+export declare function Img({ src, alt, sizes, ratio, eager, className, node, phoneSrc }: {
     src: string;
     alt: string;
     sizes: string;
     ratio?: Ratio;
     eager?: boolean;
     className?: string;
+    node?: string; /** Another picture for phones, shown on small screens. */
+    phoneSrc?: string;
 }): import("react").JSX.Element;