@caltho/site-kit 0.2.10 → 0.3.0

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,10 +2,14 @@ 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;
 export declare const site: () => import("../content/index.ts").Site;
+/** The Look's values as CSS variables (lookVars), at build and in the preview; empty for a site without a Look. */
+export declare const lookValues: () => Record<string, string>;
 export declare function image(src: string): PreparedImage;
 /** The page at a catch-all route's segments (`[[...path]]`), or null. */
 export declare function pageAt(path: string[] | undefined): Page | null;

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,11 +11,13 @@ 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;
 /** A picture not chosen yet, in a draft: a grey box where it will go. */
 const NOT_CHOSEN = {
     width: 1600,
@@ -30,6 +33,8 @@ export function prepared() {
     return current;
 }
 export const site = () => prepared().site;
+/** The Look's values as CSS variables (lookVars), at build and in the preview; empty for a site without a Look. */
+export const lookValues = () => prepared().look ?? {};
 export function image(src) {
     const found = prepared().images[src];
     // A section being filled in, in the preview, is drawn with its picture still to choose; a build
@@ -43,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

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { type Business, type LookOptions, type Site } from "../content/index.ts";
+/** What the frame reads of the site: its business, pages, menu, footer and Look. */
+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
+ * visitors came to do (the menu's button, else a call button where there's a phone). On a phone the
+ * menu folds into a native disclosure, so it opens without any script, and calling stays one tap
+ * away. Sticky or not, its style and layout are the Look's Header (headerOf).
+ */
+export declare function KitHeader({ site, current, look }: {
+    site: FrameSite;
+    current: string;
+    look: Pick<LookOptions, "header">;
+}): import("react").JSX.Element;
+/** The bottom of every page: how to reach them, when they're open, the pages, the policies, and where else they are online. */
+export declare function KitFooter({ site }: {
+    site: FrameSite;
+}): 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), 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;
+    current: string;
+    look: Pick<LookOptions, "header">;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/next/frame.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { buttonStyleClass, dayRange, footerOf, headerOf, menuOf, telHref } from "../content/index.js";
+import { lookValues } from "./data.js";
+/** The Look's values, where the site's data is loaded (not in a test drawing the frame alone). */
+const lookOf = () => {
+    try {
+        return lookValues();
+    }
+    catch {
+        return {};
+    }
+};
+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",
+    pin: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
+    menu: "M4 6h16M4 12h16M4 18h16",
+    close: "M18 6 6 18M6 6l12 12",
+};
+/** A line icon beside words that say the same, so hidden from a screen reader. */
+function FrameIcon({ name, className }) {
+    return (_jsx("svg", { 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: _jsx("path", { d: PATHS[name] }) }));
+}
+/**
+ * The top of every page: the business's logo or name (home), the menu, and the one thing most
+ * visitors came to do (the menu's button, else a call button where there's a phone). On a phone the
+ * menu folds into a native disclosure, so it opens without any script, and calling stays one tap
+ * away. Sticky or not, its style and layout are the Look's Header (headerOf).
+ */
+export function KitHeader({ site, current, look }) {
+    const b = site.business;
+    const h = headerOf(site.look, look);
+    const { links: menu, button: chosen } = menuOf(site);
+    const action = chosen ?? (b.phone ? { label: b.phone, href: telHref(b.phone, b.address?.country) } : null);
+    const isCurrent = (href) => href === current || (href !== "/" && current.startsWith(href));
+    const call = !!action?.href.startsWith("tel:");
+    const link = (m) => (_jsx("a", { href: m.href, "aria-current": isCurrent(m.href) ? "page" : undefined, className: m.emphasis ? "is-emphasis" : undefined, children: m.label }));
+    // The business's button as it chose it: its style (accent, quiet) and a border of its own.
+    const vars = lookOf();
+    const styled = [chosen?.style === "accent" ? "kit-button-accent" : chosen?.style === "quiet" ? "kit-button-quiet" : "", buttonStyleClass(chosen?.style, vars)].filter(Boolean).join(" ");
+    // The phone's menu button: in one of the business's button styles, where the header says.
+    const menuStyled = buttonStyleClass(h.menuStyle, vars);
+    const button = (className) => action && (_jsxs("a", { className: styled ? `${className} ${styled}` : className, href: action.href, children: [call && _jsx(FrameIcon, { name: "phone" }), _jsxs("span", { children: [call && !/call/i.test(action.label) && _jsx("span", { className: "kit-sr", children: "Call " }), action.label] })] }));
+    return (_jsx("header", { className: `kit-header kit-header-${h.style} kit-header-${h.layout}${h.sticky ? " is-sticky" : ""}`, children: _jsxs("div", { className: "kit-wrap kit-header-row", children: [_jsx("a", { className: "kit-brand", href: "/", "aria-label": current === "/" ? `${b.name}, home` : `${b.name}, back to home`, children: b.logo ? _jsx(Img, { src: b.logo.src, alt: "", sizes: "180px", className: "kit-logo", eager: true }) : _jsx("span", { className: "kit-brand-name", children: b.name }) }), menu.length > 0 && (_jsx("nav", { className: "kit-menu-wide", "aria-label": "Main", children: _jsx("ul", { children: menu.map((m) => m.children?.length ? (_jsx(KitMenuGroup, { label: m.label, href: m.href, emphasis: m.emphasis, current: current, children: m.children }, m.href + m.label)) : (_jsx("li", { children: link(m) }, m.href + m.label))) }) })), button(`kit-button kit-header-action${call ? " is-call" : ""}`), menu.length > 0 && (_jsxs("details", { className: `kit-menu-narrow kit-menu-${h.menuShows}`, children: [_jsxs("summary", { className: menuStyled, children: [_jsx(FrameIcon, { name: "menu", className: "when-closed" }), _jsx(FrameIcon, { name: "close", className: "when-open" }), _jsx("span", { className: "kit-menu-word", children: "Menu" })] }), _jsxs("nav", { "aria-label": "Main", children: [_jsx("ul", { children: menu.map((m) => (_jsxs("li", { children: [link(m), !!m.children?.length && (_jsx("ul", { className: "kit-menu-sub", children: m.children.map((c) => (_jsx("li", { children: link(c) }, c.href + c.label))) }))] }, m.href + m.label))) }), button("kit-button")] })] }))] }) }));
+}
+const SOCIAL = { google: "Google", facebook: "Facebook", instagram: "Instagram", yelp: "Yelp", nextdoor: "Nextdoor", linkedin: "LinkedIn", youtube: "YouTube", tiktok: "TikTok" };
+/** The bottom of every page: how to reach them, when they're open, the pages, the policies, and where else they are online. */
+export function KitFooter({ site }) {
+    const b = site.business;
+    // The links edited in CalOS (Footer), else the menu's under "Pages" and the policy pages in the legal row.
+    const isPolicy = (path) => site.pages.find((p) => p.path === path)?.blocks.some((s) => s.type === "policy");
+    const footer = footerOf(site);
+    const columns = site.footer ? footer.columns : footer.columns.map((c) => ({ heading: "Pages", links: c.links.filter((l) => !isPolicy(l.href)) }));
+    const legal = site.footer ? footer.legal : site.pages.filter((p) => isPolicy(p.path)).map((p) => ({ label: p.menu ?? p.title, href: p.path }));
+    const social = Object.entries(b.social ?? {}).filter(([, url]) => url);
+    const hours = b.hours ?? [];
+    return (_jsxs("footer", { className: "kit-footer", children: [_jsxs("div", { className: "kit-wrap kit-footer-grid", children: [_jsxs("div", { className: "kit-footer-about", children: [_jsx("p", { className: "kit-footer-name", children: b.name }), b.tagline && _jsx("p", { className: "kit-footer-muted", children: b.tagline }), _jsxs("ul", { className: "kit-footer-contact", children: [b.phone && (_jsxs("li", { children: [_jsx(FrameIcon, { name: "phone" }), _jsx("a", { href: telHref(b.phone, b.address?.country), children: b.phone })] })), b.email && (_jsxs("li", { children: [_jsx(FrameIcon, { name: "mail" }), _jsx("a", { href: `mailto:${b.email}`, children: b.email })] })), b.address && (_jsxs("li", { children: [_jsx(FrameIcon, { name: "pin" }), _jsx("span", { children: b.showAddress ? (_jsxs(_Fragment, { children: [b.address.street, _jsx("br", {}), b.address.locality, ", ", b.address.region, " ", b.address.postcode] })) : (_jsxs(_Fragment, { children: [b.address.locality, ", ", b.address.region] })) })] }))] })] }), hours.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "kit-footer-heading", children: "Hours" }), _jsx("dl", { className: "kit-footer-hours", children: hoursLines(b).map((h) => (_jsxs("div", { children: [_jsx("dt", { children: dayRange(h.days) }), _jsx("dd", { children: h.time })] }, h.days.join("")))) }), b.hoursNote && _jsx("p", { className: "kit-footer-muted", children: b.hoursNote })] })), columns
+                        .filter((c) => c.links.length)
+                        .map((c, i) => (_jsxs("nav", { "aria-label": c.heading ?? "Footer", children: [c.heading && _jsx("h2", { className: "kit-footer-heading", children: c.heading }), _jsx("ul", { className: "kit-footer-links", children: c.links.map((l) => (_jsx("li", { children: _jsx("a", { href: l.href, children: l.label }) }, l.href))) })] }, i))), social.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "kit-footer-heading", children: "Follow" }), _jsx("ul", { className: "kit-footer-links", children: social.map(([key, url]) => (_jsx("li", { children: _jsx("a", { href: url, rel: "noopener me", children: SOCIAL[key] ?? key }) }, key))) })] }))] }), _jsxs("div", { className: "kit-wrap kit-footer-base", children: [_jsxs("p", { children: ["\u00A9 ", new Date().getFullYear(), " ", b.name, b.licence && _jsxs(_Fragment, { children: [" \u00B7 ", b.licence] }), footer.note && _jsxs(_Fragment, { children: [" \u00B7 ", footer.note] })] }), legal.length > 0 && (_jsx("ul", { className: "kit-footer-policies", children: legal.map((l) => (_jsx("li", { children: _jsx("a", { href: l.href, children: l.label }) }, l.href))) }))] })] }));
+}
+/**
+ * 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), 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 ? 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

@@ -1,8 +1,14 @@
-export { image, pageAt, prepared, site } from "./data.ts";
+export { image, lookValues, pageAt, prepared, site } from "./data.ts";
+export { KitBlocks } from "./blocks.tsx";
+export { BlockMark } from "./block-mark.tsx";
 export { JsonLd } from "./JsonLd.tsx";
 export { pageMetadata, robots, sitemap, staticParams } from "./metadata.ts";
 export { Img, type Ratio } from "./parts/Img.tsx";
 export { LookStyle } from "./parts/LookStyle.tsx";
 export { Md } from "./parts/Md.tsx";
-export { KitSection, type KitBlock, type KitClasses } from "./sections.tsx";
+export { KIT_CLASSES, KitSection, type KitBlock, type KitClasses } from "./sections.tsx";
 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

@@ -1,11 +1,17 @@
 // The plumbing a Next.js site needs from the kit, whatever its design: the prepared content, a page by
 // its path, metadata, picture and Markdown parts, structured data. A site's own components, in its own
-// repository, do the looks. Server components only: nothing here runs in the visitor's browser.
-export { image, pageAt, prepared, site } from "./data.js";
+// repository, do the looks. Server components, but for BlockMark and Slideshow, small client parts.
+export { image, lookValues, pageAt, prepared, site } from "./data.js";
+export { KitBlocks } from "./blocks.js";
+export { BlockMark } from "./block-mark.js";
 export { JsonLd } from "./JsonLd.js";
 export { pageMetadata, robots, sitemap, staticParams } from "./metadata.js";
 export { Img } from "./parts/Img.js";
 export { LookStyle } from "./parts/LookStyle.js";
 export { Md } from "./parts/Md.js";
-export { KitSection } from "./sections.js";
+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/menu-group.d.ts

@@ -0,0 +1,11 @@
+export type MenuChild = {
+    label: string;
+    href: string;
+};
+export declare function KitMenuGroup({ label, href, children, current, emphasis }: {
+    label: string;
+    href: string;
+    children: MenuChild[];
+    current: string;
+    emphasis?: boolean;
+}): import("react").JSX.Element;

package/dist/next/menu-group.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A menu link with links under it, on a wide screen: the link itself, and beside it a button that
+// opens the links under it (aria-expanded). Opened by a click, Enter or Space; closed by Escape (back
+// to its button), a click elsewhere, or moving focus out of it. Never hover only: what a mouse can
+// open, a keyboard and a finger can too.
+import { useEffect, useId, useRef, useState } from "react";
+export function KitMenuGroup({ label, href, children, current, emphasis }) {
+    const [open, setOpen] = useState(false);
+    const id = useId();
+    const box = useRef(null);
+    const button = useRef(null);
+    const isCurrent = (h) => h === current || (h !== "/" && current.startsWith(h));
+    useEffect(() => {
+        if (!open)
+            return;
+        const away = (e) => {
+            if (!box.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", away);
+        return () => document.removeEventListener("pointerdown", away);
+    }, [open]);
+    return (_jsxs("li", { ref: box, className: open ? "kit-menu-group is-open" : "kit-menu-group", onKeyDown: (e) => {
+            if (e.key === "Escape" && open) {
+                setOpen(false);
+                button.current?.focus();
+            }
+        }, onBlur: (e) => {
+            if (!box.current?.contains(e.relatedTarget))
+                setOpen(false);
+        }, children: [_jsx("a", { href: href, "aria-current": isCurrent(href) ? "page" : undefined, className: emphasis ? "is-emphasis" : undefined, children: label }), _jsxs("button", { ref: button, type: "button", className: "kit-menu-group-toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((o) => !o), children: [_jsx("svg", { className: "kit-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }), _jsxs("span", { className: "kit-sr", children: ["More under ", label] })] }), _jsx("ul", { id: id, className: "kit-menu-group-list", hidden: !open, children: children.map((c) => (_jsx("li", { children: _jsx("a", { href: c.href, "aria-current": isCurrent(c.href) ? "page" : undefined, children: c.label }) }, c.href + c.label))) })] }));
+}