@caltho/site-kit 0.2.10 → 0.3.0

package/dist/sections.test.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
-import { defineSite, z } from "./content/index.js";
+import { defineSite, lookVars, z } from "./content/index.js";
+import { KitBlocks } from "./next/blocks.js";
+import { InPreview } from "./next/block-mark.js";
 import { setPrepared } from "./next/data.js";
 import { KitSection } from "./next/sections.js";
 import { Slideshow } from "./next/slideshow.js";
-import { gallery, isKitSection, sections, slideshow } from "./sections/index.js";
+import { gallery, ICON_NAMES, isKitSection, own as ownSection, presets, sections, slideshow, videoEmbed } from "./sections/index.js";
+/** A site's own styles for each thing kit sections draw, given in place of the kit's. */
+const theme = { section: "s", wrap: "w", headingLarge: "h-l", headingMedium: "h-m", headingSmall: "h-s", text: "t", muted: "m", button: "b", buttonQuiet: "bq" };
 // Sections any site can use: their fields, as a site takes them into its own, and drawn.
 const own = { hero: z.object({ heading: z.string() }) };
 describe("the kit's sections", () => {
@@ -36,9 +40,9 @@ describe("a gallery, drawn", () => {
         csp: {},
     });
     it("is a grid of its photos, each opening its largest copy, with its heading, intro and captions", () => {
-        const html = renderToStaticMarkup(_jsx(KitSection, { s: { type: "gallery", id: "work", heading: "Our decks", intro: "Built this **summer**.", columns: "4", shape: "landscape", images: [{ src: "a.jpg", alt: "A cedar deck", caption: "Cedar, 2026" }, { src: "b.jpg", alt: "A composite deck" }] }, level: 2 }));
-        expect(html).toContain('<section class="kit-section kit-gallery" id="work" aria-labelledby="work-heading">');
-        expect(html).toContain('<h2 id="work-heading" class="kit-heading">Our decks</h2>');
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: { type: "gallery", id: "work", heading: "Our decks", intro: "Built this **summer**.", columns: "4", shape: "landscape", images: [{ src: "a.jpg", alt: "A cedar deck", caption: "Cedar, 2026" }, { src: "b.jpg", alt: "A composite deck" }] }, level: 2, classes: theme }));
+        expect(html).toContain('<section class="s kit-gallery" id="work" aria-labelledby="work-heading">');
+        expect(html).toContain('<h2 id="work-heading" class="h-l">Our decks</h2>');
         expect(html).toContain("<strong>summer</strong>");
         expect(html).toContain('class="kit-gallery-grid kit-cols-4"');
         expect(html).toContain('<a href="/_img/a.1600.webp" class="kit-gallery-open">');
@@ -51,14 +55,14 @@ describe("a gallery, drawn", () => {
         expect(html).not.toMatch(/\sstyle=/);
     });
     it("sits in a site with a design of its own: its section, container and heading classes in place of the kit's", () => {
-        const html = renderToStaticMarkup(_jsx(KitSection, { s: { type: "gallery", heading: "Inside", images: [{ src: "a.jpg", alt: "A cabin" }] }, classes: { section: "", wrap: "mx-auto max-w-5xl px-4", heading: "font-display text-3xl" } }));
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: { type: "gallery", heading: "Inside", images: [{ src: "a.jpg", alt: "A cabin" }] }, classes: { ...theme, section: "", wrap: "mx-auto max-w-5xl px-4", headingLarge: "font-display text-3xl" } }));
         expect(html).toContain('<section class="kit-gallery"');
         expect(html).toContain('<div class="mx-auto max-w-5xl px-4">');
         expect(html).toContain('class="font-display text-3xl">Inside</h2>');
         expect(html).not.toContain("kit-wrap");
     });
     it("draws nothing for a type that isn't the kit's: the site's own to draw", () => {
-        expect(renderToStaticMarkup(_jsx(KitSection, { s: { type: "hero", heading: "Hi" } }))).toBe("");
+        expect(renderToStaticMarkup(_jsx(KitSection, { s: { type: "hero", heading: "Hi" }, classes: theme }))).toBe("");
     });
 });
 describe("a slideshow", () => {
@@ -86,7 +90,7 @@ describe("a slideshow", () => {
         expect(ok.site.pages[0].blocks[0]).toMatchObject({ seconds: 5, shape: "wide" });
         expect(site.parse(page([{ type: "slideshow", images: [{ src: "a.jpg", alt: "A" }] }])).problems?.join(" ")).toMatch(/images/);
         expect(slideshow.meta()?.title).toBe("Slideshow");
-        const html = renderToStaticMarkup(_jsx(KitSection, { s: { type: "slideshow", heading: "On board", shape: "landscape", seconds: 4, images: [{ src: "a.jpg", alt: "A cabin", caption: "Cabin" }, { src: "b.jpg", alt: "The deck" }] } }));
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: { type: "slideshow", heading: "On board", shape: "landscape", seconds: 4, images: [{ src: "a.jpg", alt: "A cabin", caption: "Cabin" }, { src: "b.jpg", alt: "The deck" }] }, classes: theme }));
         expect(html).toContain('class="kit-slides kit-shape-landscape"');
         expect(html).toContain("<figcaption>Cabin</figcaption>");
         expect(html).toContain('aria-label="On board"');
@@ -114,21 +118,279 @@ describe("a section of the business's own", () => {
         // Saved sections are optional: a site without any is as it was.
         expect(site.parse(page([block])).site.saved).toEqual([]);
     });
+    it("draws lines across a section's full width where its Layout says, strong in the text colour", async () => {
+        const { KitBlocks } = await import("./next/blocks.js");
+        const strip = { type: "own", columns: [{ parts: [{ type: "text", text: "Where we work" }] }], placement: { lines: "both", lineColour: "strong" } };
+        const html = renderToStaticMarkup(_jsx(KitBlocks, { blocks: [strip, { ...strip, placement: {} }], render: () => null }));
+        expect(html).toContain('<div class="kit-lines kit-lines-both kit-lines-strong">');
+        expect(html.match(/class="kit-lines /g)?.length).toBe(1);
+    });
+    it("draws a heading at the Look's largest sizes, a part in the other font, and a column's parts at its foot", () => {
+        const own = { type: "own", layout: "two", columns: [{ place: "bottom", parts: [{ type: "heading", text: "The good outside.", size: "display" }, { type: "text", text: "Yard care.", font: "heading" }] }, { parts: [{ type: "items", font: "text", items: [{ title: "Yard care" }] }] }] };
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: own, level: 2, classes: theme }));
+        expect(html).toContain('<h2 class="h-l kit-type-display">The good outside.</h2>');
+        expect(html).toContain('class="kit-own-column kit-own-column-bottom"');
+        expect(html).toContain("kit-own-text t kit-font-heading");
+        expect(html).toContain('class="kit-own-items-title h-m kit-font-text"');
+    });
     it("is drawn in the site's own classes: its heading, words and buttons", () => {
-        const html = renderToStaticMarkup(_jsx(KitSection, { s: block, level: 2, classes: { section: "", wrap: "site-wrap", heading: "site-h", text: "site-text", button: "site-button" } }));
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: block, level: 2, classes: { ...theme, section: "", wrap: "site-wrap", headingLarge: "site-h", text: "site-text", button: "site-button", muted: "site-muted" } }));
         expect(html).toContain('class="kit-own-grid kit-own-two kit-own-align-left"');
-        expect(html).toContain('<h2 class="site-h kit-own-h-large">Our packages</h2>');
+        expect(html).toContain('<h2 class="site-h">Our packages</h2>');
         expect(html).toContain("<strong>the one</strong>");
         expect(html).toContain('class="kit-own-list kit-own-list-checks site-text"');
         expect(html).toContain('<a href="/" class="site-button">Book</a>');
-        expect(html).toContain('<span class="kit-own-amount">$120</span>');
-        expect(html).toContain("<dd>8</dd>");
+        expect(html).toContain('<span class="kit-own-amount h-m">$120</span>');
+        expect(html).toContain('<dd class="h-m">8</dd>');
         expect(html).toContain("<blockquote class=\"site-text\">Best week ever.</blockquote>");
         expect(html).not.toMatch(/\sstyle=/);
     });
-    it("keeps to its layout's columns, and draws the kit's own button where the site gave none", () => {
-        const html = renderToStaticMarkup(_jsx(KitSection, { s: { ...block, layout: "one" } }));
+    it("keeps to its layout's columns, every button in the site's own button style", () => {
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: { ...block, layout: "one" }, classes: theme }));
         expect(html.match(/kit-own-column/g)).toHaveLength(1);
+        expect(html).toContain('class="b"');
+        expect(html).not.toMatch(/kit-button|kit-heading/);
+    });
+});
+describe("a section of the business's own, its background and spacing", () => {
+    const one = (extra, parts = [{ type: "heading", text: "Hello" }, { type: "button", label: "Book", href: "/" }]) => ({ type: "own", columns: [{ parts }], ...extra });
+    it("is plain with the site's own spacing unless it says, and content from before still reads", () => {
+        const parsed = ownSection.parse({ columns: [{ parts: [{ type: "text", text: "Hi" }] }], tone: "brand" });
+        expect(parsed).toMatchObject({ layout: "one", align: "left", tone: "brand", spacing: "normal" });
+        expect(parsed.background).toBeUndefined();
+        expect(ownSection.safeParse({ columns: [{ parts: [] }], tone: "purple" }).success).toBe(false);
+        expect(ownSection.safeParse({ columns: [{ parts: [] }], spacing: "huge" }).success).toBe(false);
+    });
+    it("draws its tone and spacing as classes, words and buttons kept readable on brand, dark or a photo", () => {
+        const plain = renderToStaticMarkup(_jsx(KitSection, { s: one({}), classes: theme }));
+        expect(plain).toContain('class="s kit-own kit-own-plain kit-own-pad-normal"');
+        const soft = renderToStaticMarkup(_jsx(KitSection, { s: one({ tone: "soft", spacing: "tight" }), classes: theme }));
+        expect(soft).toContain('class="s kit-own kit-own-soft kit-own-pad-tight kit-own-shape-card"');
+        for (const tone of ["brand", "dark"]) {
+            const html = renderToStaticMarkup(_jsx(KitSection, { s: one({ tone, spacing: "roomy" }), classes: { ...theme, button: "site-button" } }));
+            expect(html).toContain(`class="s kit-own kit-own-${tone} kit-own-pad-roomy kit-own-shape-card kit-own-inverse"`);
+            expect(html).toContain('<p class="kit-own-action"><a href="/" class="site-button">Book</a></p>');
+        }
+        expect(plain).not.toMatch(/\sstyle=/);
+    });
+    it("draws a photo behind it, under a scrim, its words light over it", () => {
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: one({ background: { src: "a.jpg", alt: "" } }), classes: theme }));
+        expect(html).toContain("kit-own-behind kit-own-inverse");
+        expect(html).toMatch(/<div class="kit-own-bg" aria-hidden="true"><img [^>]*alt=""/);
+        expect(html).not.toMatch(/\sstyle=/);
+    });
+    it("keeps buttons one after another together, side by side", () => {
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: one({}, [{ type: "button", label: "Call", href: "tel:+15550100000" }, { type: "button", label: "Write", href: "mailto:a@b.co", style: "quiet" }, { type: "text", text: "Or visit." }]), classes: theme }));
+        expect(html).toContain('<div class="kit-own-actions"><p class="kit-own-action"><a href="tel:+15550100000" class="b">Call</a></p><p class="kit-own-action kit-own-action-quiet"><a href="mailto:a@b.co" class="bq">Write</a></p></div>');
+    });
+    it("shows where a photo still to choose will go, in the preview", () => {
+        expect(ownSection.safeParse({ columns: [{ parts: [{ type: "photo" }] }] }).success).toBe(true);
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: one({}, [{ type: "photo", shape: "square" }]), classes: theme }));
+        expect(html).toContain('<div class="kit-own-photo-empty kit-own-shape-square" aria-hidden="true"></div>');
+    });
+});
+describe("ready-made sections", () => {
+    it("are each a valid section of the business's own, with a key, a name and a description", () => {
+        expect(presets.length).toBeGreaterThanOrEqual(9);
+        expect(new Set(presets.map((p) => p.key)).size).toBe(presets.length);
+        const site = defineSite({ ...sections });
+        for (const p of presets) {
+            expect(p.block.type).toBe("own");
+            const r = ownSection.safeParse(p.block);
+            if (!r.success)
+                throw new Error(`${p.key}: ${r.error.message}`);
+            const parsed = site.parse({ url: "https://acme.example", business: { name: "Acme" }, pages: [{ path: "/", title: "Acme", description: "Acme does things.", blocks: [p.block] }] });
+            expect(parsed.problems).toBeUndefined();
+            expect(p.name.length && p.description.length).toBeTruthy();
+        }
+    });
+    it("read as plain business words: sentence case, no exclamation marks, no placeholder Latin", () => {
+        const words = JSON.stringify(presets);
+        expect(words).not.toMatch(/!/);
+        expect(words.toLowerCase()).not.toMatch(/lorem|ipsum/);
+        for (const p of presets)
+            expect(p.name[0]).toBe(p.name[0].toUpperCase());
+    });
+    it("draw", () => {
+        for (const p of presets)
+            expect(renderToStaticMarkup(_jsx(KitSection, { s: p.block, classes: theme }))).toContain("kit-own");
+    });
+});
+describe("kit sections with no classes of the site's", () => {
+    const block = { type: "own", columns: [{ parts: [{ type: "heading", text: "Hello", size: "large" }, { type: "text", text: "Words." }, { type: "price", amount: "Price", per: "a visit" }, { type: "button", label: "Book", href: "/" }, { type: "button", label: "Call", href: "/", style: "quiet" }] }] };
+    it("are drawn in the kit's classes, which read the Look", () => {
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: block }));
+        expect(html).toContain('<section class="kit-section kit-own kit-own-plain kit-own-pad-normal"><div class="kit-wrap">');
+        expect(html).toContain('<h2 class="kit-h kit-h-large">Hello</h2>');
+        expect(html).toContain('kit-own-text kit-text"');
+        expect(html).toContain('<span class="kit-own-per kit-muted"> a visit</span>');
+        expect(html).toContain('<a href="/" class="kit-button">Book</a>');
+        expect(html).toContain('<a href="/" class="kit-button kit-button-quiet">Call</a>');
+    });
+    it("take any of the site's own in place of the kit's", () => {
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: block, classes: { headingLarge: "display", section: "" } }));
+        expect(html).toContain('<h2 class="display">Hello</h2>');
+        expect(html).toContain('<section class="kit-own');
         expect(html).toContain('class="kit-button"');
     });
 });
+describe("a page's blocks, drawn by KitBlocks", () => {
+    const look = { brand: "#2b5f8a", palette: [{ name: "Sand", color: "#e8dcc4" }] };
+    const prepare = () => setPrepared({
+        site: { url: "https://acme.example", lang: "en", business: { name: "Acme" }, redirects: [], pages: [] },
+        images: { "a.jpg": { width: 1600, height: 1000, src: "/_img/a.1600.jpg", srcset: [] } },
+        csp: {},
+        look: lookVars(undefined, look),
+    });
+    const blocks = [
+        { type: "hero", heading: "Hi" },
+        { type: "own", columns: [{ parts: [{ type: "heading", text: "Ours" }] }], placement: { background: { color: "sand" } } },
+        { type: "hero", heading: "Over a photo", placement: { background: { photo: { src: "a.jpg", alt: "A deck" }, overlay: "dark" } } },
+        { type: "hero", heading: "Plain", placement: { align: "center" } },
+    ];
+    const render = (b) => (b.type === "hero" ? _jsx("section", { className: "hero", children: String(b.heading) }) : null);
+    it("draws the site's own blocks, the kit's for the rest, and a frame only where there's a background", () => {
+        prepare();
+        const html = renderToStaticMarkup(_jsx(KitBlocks, { blocks: blocks, render: render }));
+        expect(html).toContain('<section class="hero">Hi</section>');
+        expect(html).toContain('<div class="kit-frame kit-bg-swatch-1"><section class="kit-section kit-own');
+        expect(html).toMatch(/<div class="kit-frame kit-frame-photo kit-overlay-dark kit-frame-dark"><div class="kit-frame-bg" aria-hidden="true"><img [^>]*alt=""[^>]*><\/div><section class="hero">Over a photo<\/section><\/div>/);
+        expect(html.match(/kit-frame"|kit-frame /g)).toHaveLength(2);
+        expect(html).toContain('<section class="hero">Plain</section>');
+        // No marks on the live site, and no style attribute anywhere (the content security policy blocks them).
+        expect(html).not.toContain("<template");
+        expect(html).not.toMatch(/\sstyle=/);
+    });
+    it("marks where each block starts in the preview, and gives each its heading level", () => {
+        prepare();
+        const html = renderToStaticMarkup(_jsx(InPreview.Provider, { value: true, children: _jsx(KitBlocks, { blocks: blocks.slice(0, 2), render: render, level: (i) => (i === 1 ? 1 : 2) }) }));
+        expect(html).toMatch(/^<template data-calos-block="0"><\/template><section class="hero">Hi<\/section><template data-calos-block="1"><\/template><div class="kit-frame/);
+        expect(html).toContain('<h2 class="kit-h kit-h-medium">Ours</h2>');
+    });
+    it("knows a background is dark from the Look as it is, so a light brand keeps dark words", () => {
+        setPrepared({ site: { pages: [] }, images: {}, csp: {}, look: lookVars(undefined, { brand: "#ffd400" }) });
+        const html = renderToStaticMarkup(_jsx(KitBlocks, { blocks: [{ type: "own", columns: [{ parts: [] }], placement: { background: { color: "brand" } } }], render: () => null }));
+        expect(html).toContain('<div class="kit-frame kit-bg-brand">');
+    });
+});
+describe("the schema a site writes", () => {
+    it("carries the ready-made sections the site's own kind takes, at its root", () => {
+        const withOwn = defineSite({ ...sections, ...own }).jsonSchema();
+        expect(withOwn["x-presets"].map((p) => p.key)).toEqual(presets.map((p) => p.key));
+        expect(withOwn["x-presets"][0]).toMatchObject({ key: "hero", name: "Opening", block: { type: "own" } });
+        expect(defineSite(own).jsonSchema()["x-presets"]).toBeUndefined();
+        // Prices and numbers are never made up.
+        const words = JSON.stringify(withOwn["x-presets"]);
+        expect(words).not.toMatch(/"amount":"[^"]*\d/);
+        expect(words).not.toMatch(/"value":"[^"]*\d/);
+    });
+});
+describe("a section of the business's own: tables, icons, logos and videos", () => {
+    const one = (parts, extra = {}) => ({ type: "own", columns: [{ parts }], ...extra });
+    const ok = (parts, extra = {}) => ownSection.safeParse(one(parts, extra));
+    const problems = (parts) => {
+        const r = ok(parts);
+        return r.success ? "" : r.error.issues.map((i) => `${i.path.join(".")}: ${i.message}`).join(" | ");
+    };
+    const table = { type: "table", columns: ["", "Basic", "Plus"], rows: [{ label: "Price", cells: ["Price", "Price"] }, { label: "Visits", cells: ["yes", "No"] }], highlight: 2 };
+    it("a table: two to five columns, a cell for each after the first, a column it picks out that's there", () => {
+        expect(ok([table]).success).toBe(true);
+        expect(ok([{ ...table, highlight: undefined }]).success).toBe(true);
+        expect(problems([{ ...table, columns: ["Only"] }])).toMatch(/columns/);
+        expect(problems([{ ...table, columns: ["", "a", "b", "c", "d", "e"] }])).toMatch(/columns/);
+        expect(problems([{ ...table, rows: [] }])).toMatch(/rows/);
+        expect(problems([{ ...table, rows: Array.from({ length: 21 }, () => ({ label: "Row", cells: ["a", "b"] })) }])).toMatch(/rows/);
+        expect(problems([{ ...table, rows: [{ label: "Price", cells: ["Price"] }] }])).toMatch(/rows.0.cells: One cell for each of the 2 columns/);
+        expect(problems([{ ...table, highlight: 3 }])).toMatch(/highlight/);
+        expect(problems([{ ...table, highlight: 0 }])).toMatch(/highlight/);
+        expect(problems([{ ...table, columns: ["", "Basic", ""] }])).toMatch(/columns.2: A column needs a heading/);
+    });
+    it("a table, drawn: a real table on a wider screen and a card for each row on a phone, ticks and dashes read as yes and no", () => {
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: one([table], { heading: "Compare" }) }));
+        expect(html).toContain('<div class="kit-table-wide"><table class="kit-table kit-text"><thead><tr><td></td><th scope="col">Basic</th><th scope="col" class="kit-table-highlight">Plus</th></tr></thead>');
+        expect(html).toContain('<tr><th scope="row">Price</th><td>Price</td><td class="kit-table-highlight">Price</td></tr>');
+        expect(html).toMatch(/<td><span class="kit-table-yes"><svg class="kit-icon"[^>]*aria-hidden="true"[^>]*>.*?<\/svg><span class="kit-sr">Yes<\/span><\/span><\/td>/);
+        expect(html).toContain('<span class="kit-sr">No</span>');
+        // On a phone: each row a card, its label its heading (under the section's), each column's heading beside its cell.
+        expect(html).toContain('<ul class="kit-table-cards"><li class="kit-table-card"><h3 class="kit-h kit-h-small">Price</h3><dl class="kit-text"><div><dt>Basic</dt><dd>Price</dd></div><div class="kit-table-highlight"><dt>Plus</dt><dd>Price</dd></div></dl></li>');
+        expect(html).not.toMatch(/\sstyle=/);
+    });
+    it("an icon: one of the kit's, drawn inline in the theme's colour, never fetched", () => {
+        expect(ICON_NAMES.length).toBeGreaterThanOrEqual(40);
+        for (const name of ["check", "calendar", "map-pin", "arrow-right", "invoice", "warning", "grid"])
+            expect(ICON_NAMES).toContain(name);
+        expect(ICON_NAMES.some((n) => /sparkle/.test(n))).toBe(false);
+        expect(ok([{ type: "icon", name: "calendar" }]).success).toBe(true);
+        expect(problems([{ type: "icon", name: "sparkle" }])).toMatch(/name/);
+        expect(ownSection.parse(one([{ type: "icon", name: "clock" }])).columns[0].parts[0]).toMatchObject({ size: "medium" });
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: one([{ type: "icon", name: "clock", size: "large" }]) }));
+        expect(html).toMatch(/<svg data-icon="clock" class="kit-icon kit-own-icon kit-own-icon-large" viewBox="0 0 24 24" fill="none" stroke="currentColor"[^>]*aria-hidden="true"[^>]*><path d="M12 22a10/);
+        expect(html).not.toMatch(/<img|<use|href=/);
+    });
+    it("logos: two to twelve, in a row with a line above if it has one", () => {
+        const logos = { type: "logos", title: "Who we work with", images: [{ src: "a.png", alt: "Acme" }, { src: "b.png", alt: "Bolt" }] };
+        expect(ok([logos]).success).toBe(true);
+        expect(problems([{ ...logos, images: [logos.images[0]] }])).toMatch(/images/);
+        expect(problems([{ ...logos, images: Array.from({ length: 13 }, () => logos.images[0]) }])).toMatch(/images/);
+        setPrepared({ site: { pages: [] }, images: { "a.png": { width: 200, height: 80, src: "/_img/a.png", srcset: [] }, "b.png": { width: 200, height: 80, src: "/_img/b.png", srcset: [] } }, csp: {} });
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: one([logos]) }));
+        expect(html).toContain('<div class="kit-own-logos"><p class="kit-own-logos-title kit-muted">Who we work with</p><ul><li><img src="/_img/a.png"');
+        expect(html).toContain('alt="Bolt"');
+    });
+    it("a video: YouTube or Vimeo only, shown in the privacy-friendly player with its title", () => {
+        expect(videoEmbed("https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=3")).toEqual({ src: "https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ", origin: "https://www.youtube-nocookie.com" });
+        expect(videoEmbed("https://youtu.be/dQw4w9WgXcQ?si=x").src).toBe("https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ");
+        expect(videoEmbed("https://www.youtube.com/shorts/dQw4w9WgXcQ").src).toBe("https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ");
+        expect(videoEmbed("https://vimeo.com/76979871")).toEqual({ src: "https://player.vimeo.com/video/76979871?dnt=1", origin: "https://player.vimeo.com" });
+        expect(videoEmbed("https://vimeo.com/76979871/abc123").src).toBe("https://player.vimeo.com/video/76979871?h=abc123&dnt=1");
+        for (const bad of ["https://example.com/watch?v=dQw4w9WgXcQ", "http://youtu.be/dQw4w9WgXcQ", "https://youtu.be/short", "https://vimeo.com/channels/staff"]) {
+            expect(videoEmbed(bad)).toBeNull();
+            expect(problems([{ type: "video", url: bad, title: "A tour" }])).toMatch(/url: A YouTube or Vimeo address/);
+        }
+        expect(ok([{ type: "video", url: "https://youtu.be/dQw4w9WgXcQ", title: "A tour" }]).success).toBe(true);
+        expect(problems([{ type: "video", url: "https://youtu.be/dQw4w9WgXcQ" }])).toMatch(/title/);
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: one([{ type: "video", url: "https://youtu.be/dQw4w9WgXcQ", title: "A tour of the workshop" }]) }));
+        expect(html).toContain('<div class="kit-own-video"><iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" title="A tour of the workshop"');
+        expect(html).toContain('loading="lazy"');
+        // No address yet: a quiet box where it will go in the preview (the store holds a draft here), nothing on the site.
+        expect(renderToStaticMarkup(_jsx(KitSection, { s: one([{ type: "video", title: "A tour" }]) }))).toContain('<div class="kit-own-video kit-own-video-empty" aria-hidden="true"></div>');
+    });
+    it("columns drawn as cards, a heading and intro over them, and a toned section a card or a band", () => {
+        const block = {
+            type: "own",
+            id: "why",
+            layout: "two",
+            align: "center",
+            heading: "Why us",
+            intro: "Two **good** reasons.",
+            columns: [
+                { card: true, parts: [{ type: "heading", text: "One", size: "large" }] },
+                { parts: [{ type: "text", text: "Two" }] },
+            ],
+        };
+        expect(ownSection.safeParse(block).success).toBe(true);
+        expect(ownSection.parse(block).shape).toBe("card");
+        expect(ownSection.safeParse({ ...block, shape: "circle" }).success).toBe(false);
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: block, level: 2 }));
+        expect(html).toContain('<section class="kit-section kit-own kit-own-plain kit-own-pad-normal" id="why" aria-labelledby="why-heading"><div class="kit-wrap"><div class="kit-own-panel"><div class="kit-own-head kit-own-align-center"><h2 id="why-heading" class="kit-h kit-h-large">Why us</h2><div class="prose kit-own-intro kit-text"><p>Two <strong>good</strong> reasons.</p>');
+        // Under the section's heading, a part's large heading is a level down.
+        expect(html).toContain('<div class="kit-own-column kit-own-card"><h3 class="kit-h kit-h-large">One</h3>');
+        expect(html).toContain('<div class="kit-own-column"><div class="prose kit-own-text kit-text">');
+        // Plain has no shape; a toned one is a card unless it's a band; a photo behind is always across the page.
+        expect(html).not.toContain("kit-own-shape");
+        expect(renderToStaticMarkup(_jsx(KitSection, { s: { ...block, tone: "brand" } }))).toContain("kit-own-brand kit-own-pad-normal kit-own-shape-card kit-own-inverse");
+        expect(renderToStaticMarkup(_jsx(KitSection, { s: { ...block, tone: "soft", shape: "band" } }))).toContain("kit-own-soft kit-own-pad-normal kit-own-shape-band");
+        setPrepared({ site: { pages: [] }, images: { "a.jpg": { width: 1600, height: 1000, src: "/_img/a.jpg", srcset: [] } }, csp: {} });
+        expect(renderToStaticMarkup(_jsx(KitSection, { s: { ...block, tone: "dark", background: { src: "a.jpg", alt: "" } } }))).not.toContain("kit-own-shape");
+    });
+    it("the ready-made comparison, features with icons, logo strip and video", () => {
+        const keys = presets.map((p) => p.key);
+        for (const k of ["comparison", "features-icons", "logo-strip", "video"])
+            expect(keys).toContain(k);
+        const comparison = presets.find((p) => p.key === "comparison").block;
+        expect(comparison.heading).toBeTruthy();
+        expect(comparison.columns[0].parts[0]).toMatchObject({ type: "table", highlight: 2 });
+        const features = presets.find((p) => p.key === "features-icons").block;
+        expect(features.columns.map((c) => [c.card, c.parts.map((p) => p.type)])).toEqual(Array(3).fill([true, ["icon", "heading", "text"]]));
+    });
+});

package/dist/seo.js

@@ -1,6 +1,7 @@
 // What search engines and browsers read about a site besides its words: the structured data
 // (schema.org) describing the business, robots.txt, and the files Cloudflare Pages reads for
 // response headers and redirects. Everything here is worked out from the site's content.
+import { allPages } from "./content/lists.js";
 import { clock } from "./content/index.js";
 /** The page's address as search engines should know it. */
 export function canonical(site, path) {
@@ -96,7 +97,7 @@ export function robotsTxt(site) {
 }
 /** Every page search engines should list, at its canonical address. */
 export function sitemapXml(site) {
-    const urls = site.pages.filter((p) => !p.noindex).map((p) => `  <url><loc>${canonical(site, p.path)}</loc></url>`);
+    const urls = allPages(site).filter((p) => !p.noindex).map((p) => `  <url><loc>${canonical(site, p.path)}</loc></url>`);
     return `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${urls.join("\n")}\n</urlset>\n`;
 }
 /** Where CalOS's preview draws a draft (./next/preview.tsx): framed by CalOS, never indexed. */

package/dist/tree/behaviors.d.ts

@@ -0,0 +1,50 @@
+import { z } from "zod";
+export declare const BEHAVIORS: readonly ["carousel", "tabs", "accordion", "marquee", "reveal", "count-up", "sticky", "filter"];
+export type BehaviorName = (typeof BEHAVIORS)[number];
+/**
+ * The settings of each. `slides` and the like name which children are the moving parts: by default a
+ * carousel's slides are its node's children; `controls` lets a carousel's dots and arrows be drawn
+ * from its own design (nodes marked with a `slot`: "prev", "next", "dots").
+ */
+export declare const behavior: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    name: z.ZodLiteral<"carousel">;
+    seconds: z.ZodOptional<z.ZodNumber>;
+    transition: z.ZodDefault<z.ZodEnum<{
+        fade: "fade";
+        slide: "slide";
+    }>>;
+    pauseOnHover: z.ZodDefault<z.ZodBoolean>;
+    dots: z.ZodDefault<z.ZodBoolean>;
+    arrows: z.ZodDefault<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"tabs">;
+    first: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"accordion">;
+    single: z.ZodDefault<z.ZodBoolean>;
+    open: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"marquee">;
+    seconds: z.ZodDefault<z.ZodNumber>;
+    reverse: z.ZodDefault<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"reveal">;
+    effect: z.ZodDefault<z.ZodEnum<{
+        fade: "fade";
+        up: "up";
+        left: "left";
+        right: "right";
+        zoom: "zoom";
+    }>>;
+    stagger: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"count-up">;
+    seconds: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"filter">;
+    field: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"sticky">;
+    top: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>], "name">;
+export type Behavior = z.infer<typeof behavior>;

package/dist/tree/behaviors.js

@@ -0,0 +1,67 @@
+// What a built section's elements can do beyond being drawn: the kit's own small scripts, chosen by
+// name with settings, never written by a business. Visitors get static HTML; a behavior adds its
+// script only on a page that uses it, and does nothing harmful where scripting is off (the first
+// slide shown, every accordion item readable).
+import { z } from "zod";
+export const BEHAVIORS = ["carousel", "tabs", "accordion", "marquee", "reveal", "count-up", "sticky", "filter"];
+/**
+ * The settings of each. `slides` and the like name which children are the moving parts: by default a
+ * carousel's slides are its node's children; `controls` lets a carousel's dots and arrows be drawn
+ * from its own design (nodes marked with a `slot`: "prev", "next", "dots").
+ */
+export const behavior = z.discriminatedUnion("name", [
+    z.object({
+        name: z.literal("carousel"),
+        /** Seconds on each slide; none: only on a click. Never moves for visitors who asked for less motion. */
+        seconds: z.number().int().min(2).max(30).optional(),
+        /** Fade between slides, or slide sideways. */
+        transition: z.enum(["fade", "slide"]).default("fade"),
+        /** Pauses while the pointer is over it. */
+        pauseOnHover: z.boolean().default(true),
+        /** Draws its own dots and arrows (the kit's), where the design has none marked as slots. */
+        dots: z.boolean().default(true),
+        arrows: z.boolean().default(false),
+    }),
+    z.object({
+        name: z.literal("tabs"),
+        /** The tab shown first, by its place. */
+        first: z.number().int().min(0).max(20).default(0),
+    }),
+    z.object({
+        name: z.literal("accordion"),
+        /** Only one item open at a time. */
+        single: z.boolean().default(false),
+        /** The item open at first, by its place; none: all closed. */
+        open: z.number().int().min(0).max(50).optional(),
+    }),
+    z.object({
+        name: z.literal("marquee"),
+        seconds: z.number().int().min(5).max(120).default(30),
+        reverse: z.boolean().default(false),
+    }),
+    z.object({
+        name: z.literal("reveal"),
+        /** How it comes in as it's scrolled to; nothing for visitors who asked for less motion. */
+        effect: z.enum(["fade", "up", "left", "right", "zoom"]).default("up"),
+        /** Its children one after another, this many milliseconds apart. */
+        stagger: z.number().int().min(0).max(1000).default(0),
+    }),
+    z.object({
+        name: z.literal("count-up"),
+        /** Counts up to its words' number when scrolled to. */
+        seconds: z.number().min(0.3).max(5).default(1.2),
+    }),
+    z.object({
+        name: z.literal("filter"),
+        /**
+         * The field of the list repeated inside it that its buttons choose by: each button inside it (not in
+         * an item) shows the items whose field matches its words ("Real estate" is real-estate), "All" every one.
+         */
+        field: z.string().regex(/^[\w-]{1,60}$/),
+    }),
+    z.object({
+        name: z.literal("sticky"),
+        /** Stays this far from the top while its section scrolls past. */
+        top: z.number().int().min(0).max(400).default(0),
+    }),
+]);

package/dist/tree/classes.d.ts

@@ -0,0 +1,24 @@
+/** Variants a class may carry: screen sizes, states, and a few structural ones. */
+export declare const VARIANTS: Set<string>;
+export type ClassCheck = {
+    ok: boolean;
+    bad: {
+        token: string;
+        why: string;
+    }[];
+};
+/** The classes of a class string: split on whitespace, empties dropped. */
+export declare const classTokens: (c: string) => string[];
+/** A class's variants and its utility, split on colons outside brackets. */
+export declare function splitVariants(token: string): {
+    variants: string[];
+    utility: string;
+};
+/** Why one class isn't allowed, or null when it is. */
+export declare function classProblem(token: string, known?: (utility: string) => boolean): string | null;
+/** A class string checked whole: ok, or each class that isn't and why. */
+export declare function checkClasses(c: string, o?: {
+    known?: (utility: string) => boolean;
+}): ClassCheck;
+/** The allowed classes of a string (what the kit draws: a bad one is dropped, the rest kept). */
+export declare const safeClasses: (c: string | undefined) => string;

package/dist/tree/classes.js

@@ -0,0 +1,94 @@
+// Which Tailwind classes a built section may carry (cal-os docs/design/site-builder.md, "Tailwind"):
+// any utility, with the variants a site needs, and arbitrary values that are only a number, length,
+// colour, percentage or the site's own variables. Never a class that loads another site (url()), writes
+// words into the page (content-[…]), or sets an arbitrary property ([mask:…]). Pure: the kit runs it
+// to drop a bad class from a tree it draws, CalOS to refuse one, Cal to be told why.
+//
+// It checks a class's shape, not that Tailwind knows the utility: `known` (from Tailwind's own design
+// system, where it's loaded, in CalOS) adds that. A shape-valid class Tailwind doesn't know just draws nothing.
+/** Variants a class may carry: screen sizes, states, and a few structural ones. */
+export const VARIANTS = new Set([
+    "sm", "md", "lg", "xl", "2xl",
+    "max-sm", "max-md", "max-lg", "max-xl", "max-2xl",
+    "hover", "focus", "focus-visible", "focus-within", "active", "disabled", "visited",
+    "group-hover", "group-focus", "group-focus-within", "peer-hover", "peer-focus", "peer-checked",
+    // A menu button drawn open (its lines turned to a cross) while what it opens is: the accordion says aria-expanded on it.
+    "group-aria-expanded", "peer-aria-expanded",
+    "first", "last", "odd", "even", "only", "empty",
+    "motion-safe", "motion-reduce", "print", "dark",
+    "before", "after", "placeholder", "marker", "selection", "file",
+    "open", "aria-expanded", "aria-selected", "aria-current", "aria-disabled", "aria-pressed",
+]);
+/** An arbitrary value that's only data: a number, a length, a colour, a percentage, a calc of those, or a var(--…). */
+const SAFE_ARBITRARY = /^(?:-?[\d.]+(?:px|rem|em|%|vh|vw|svh|dvh|lvh|ch|ex|fr|deg|turn|s|ms)?|#[0-9a-fA-F]{3,8}|(?:rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|color-mix|calc|min|max|clamp|var|repeat|minmax|fit-content)\([\w\s.,%#+\-*/()]*\)|[\d.]+\/[\d.]+|auto|none|[a-z-]+)(?:_[\w.#%(),+\-*/]+)*$/;
+/** Utilities never allowed, whatever their value: they write words, or run the browser's code. */
+const NEVER = [/^content-\[/, /^will-change-/];
+/** The classes of a class string: split on whitespace, empties dropped. */
+export const classTokens = (c) => c.split(/\s+/).filter(Boolean);
+/** A class's variants and its utility, split on colons outside brackets. */
+export function splitVariants(token) {
+    const parts = [];
+    let depth = 0;
+    let cur = "";
+    for (const ch of token) {
+        if (ch === "[" || ch === "(")
+            depth++;
+        if (ch === "]" || ch === ")")
+            depth--;
+        if (ch === ":" && depth === 0) {
+            parts.push(cur);
+            cur = "";
+        }
+        else
+            cur += ch;
+    }
+    parts.push(cur);
+    return { variants: parts.slice(0, -1), utility: parts.at(-1) };
+}
+/** Why one class isn't allowed, or null when it is. */
+export function classProblem(token, known) {
+    if (token.length > 120)
+        return "too long";
+    if (!/^[\w\-:/.[\]()%#,!*+@&>~=]+$/.test(token))
+        return "characters a class can't have";
+    const { variants, utility } = splitVariants(token);
+    for (const v of variants)
+        if (!VARIANTS.has(v))
+            return `the variant ${v}: isn't offered`;
+    const u = utility.replace(/^!/, "").replace(/!$/, "").replace(/^-/, "");
+    if (!u)
+        return "no utility";
+    if (u.startsWith("["))
+        return "an arbitrary property ([prop:value]) isn't allowed";
+    if (NEVER.some((re) => re.test(u)))
+        return "this utility isn't allowed";
+    const arb = /\[(.*)\]/.exec(u);
+    if (arb) {
+        const v = arb[1];
+        if (/url\(|['"`\\;{}@]|javascript:|expression\(/i.test(v))
+            return "a value that loads or runs something";
+        if (!SAFE_ARBITRARY.test(v))
+            return "an arbitrary value that isn't a number, length, colour or the site's variable";
+    }
+    // An opacity after a slash (bg-ink/80, bg-ink/[.5]) is taken off before the shape is checked; a slash
+    // inside an arbitrary value (aspect-[4/3], w-[calc(100%/3)]) is the value's own.
+    const base = /\]$/.test(u) && !/\/\[[^\]]*\]$/.test(u) ? u : u.replace(/\/(?:\[[^\]]*\]|[\w.]+)$/, "");
+    // A half step (p-0.5, gap-1.5) and a number with a % (a gradient's stop: via-32%) are a utility's own values too.
+    if (!/^[a-z@][\w-]*(?:\.\d+)?(?:\d%)?(?:-\[.*\])?$/.test(base))
+        return "not a Tailwind utility's shape";
+    if (known && !known(utility))
+        return "Tailwind has no such class";
+    return null;
+}
+/** A class string checked whole: ok, or each class that isn't and why. */
+export function checkClasses(c, o = {}) {
+    const bad = [];
+    for (const token of classTokens(c)) {
+        const why = classProblem(token, o.known);
+        if (why)
+            bad.push({ token, why });
+    }
+    return { ok: bad.length === 0, bad };
+}
+/** The allowed classes of a string (what the kit draws: a bad one is dropped, the rest kept). */
+export const safeClasses = (c) => (c ? classTokens(c).filter((t) => !classProblem(t)).join(" ") : "");