@caltho/site-kit 0.2.10 → 0.2.11

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caltho/site-kit",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "What every Caltho site is built with: the contract with CalOS (content, and how a site declares what is editable), images, search and security, and the checks",
   "license": "MIT",
   "type": "module",
@@ -49,13 +49,18 @@
       "types": "./dist/sections/index.d.ts",
       "default": "./dist/sections/index.js"
     },
-    "./sections.css": "./dist/sections.css"
+    "./migrate": {
+      "types": "./dist/migrate.d.ts",
+      "default": "./dist/migrate.js"
+    },
+    "./sections.css": "./dist/sections.css",
+    "./fonts.css": "./dist/fonts.css"
   },
   "engines": {
     "node": ">=22.18"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp -R src/fonts dist/fonts && cp src/sections.css dist/sections.css && chmod +x dist/cli/index.js",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && mkdir -p dist/fonts && cp -R src/fonts/. dist/fonts/ && cp src/sections.css dist/sections.css && cp src/fonts.css dist/fonts.css && chmod +x dist/cli/index.js",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "bun test src",
     "prepack": "bun run build"