@caltho/site-kit 0.2.8 → 0.2.10

package/README.md

@@ -66,6 +66,44 @@ the kit only checks it's a URL.
 | **Preview** (`@caltho/site-kit/next/preview`) | `SitePreview`: CalOS's draft drawn with the site's own components, a click matched to its field, outlines with each section's name. |
 | **Schema** (`@caltho/site-kit/schema`) | What CalOS needs of a declaration with no site code: validate content against the JSON Schema with messages a person can act on, make a blank block or entry, list the kinds of block, and the checks across pages. |
 
+## Sections
+
+Sections any site can use, built once here (accessible, sized for each screen, inside the content
+security policy) so a site gets them with a kit update rather than code of its own. CalOS offers
+them in its editor like the site's own, and Cal can add one. Today: **gallery** (photos in a grid,
+each with an optional caption, opening its largest copy; 2 to 4 across, square, landscape, portrait
+or as taken) and **slideshow** (photos one at a time, fading from one to the next, with captions).
+
+**Your own section** (`own`) is built in CalOS rather than in code: one to four columns (or a wide one
+beside a narrow one), each a list of parts (heading, text, photo, button, list, quote, facts in a row,
+price, photos in a grid, slideshow, space), left or centred, plain or in the brand colour. Its parts
+wear the site's own classes, so what's built looks like the site. One that's wanted again is saved by
+name in the content's `saved` list, and CalOS offers it beside the site's own kinds.
+
+`Slideshow` (from `@caltho/site-kit/next`) is also a building block a site's own sections use: SCV's
+hero moves through its photos behind its words with `<Slideshow fill label="…">{photos}</Slideshow>`.
+It waits while it's off screen, pointed at or focused, never moves for someone who's asked for less
+motion, and has a button to stop it and one for each photo.
+
+A site takes them in once, three lines:
+
+```ts
+// content/schema.ts: the kit's sections beside the site's own (one of its own by the same name is kept)
+import { sections } from "@caltho/site-kit/sections";
+export const blocks = { ...sections, hero, about /* … */ };
+
+// the site's block renderer: whatever it hasn't a component for
+default:
+  return <KitSection s={block} />;
+
+// app/layout.tsx
+import "@caltho/site-kit/sections.css";
+```
+
+From then on each section the kit adds reaches the site with `cal sites kit update`. They're themed by
+the site's Look (`--look-*`); a site with a design of its own gives its own classes so they sit in
+it like its own: `<KitSection s={block} classes={{ section: "", wrap: "mx-auto max-w-5xl px-4 py-12", heading: "font-display text-3xl", text: "…", button: "…", buttonQuiet: "…" }} />`.
+
 ## Share cards
 
 Each page is shared (Open Graph) with a 1200×630 card made at build from its words: its title and

package/dist/content/index.d.ts

@@ -242,6 +242,10 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
             shareText: z.ZodOptional<z.ZodString>;
             noindex: z.ZodDefault<z.ZodBoolean>;
         }, z.core.$strip>>;
+        saved: z.ZodDefault<z.ZodArray<z.ZodObject<{
+            name: z.ZodString;
+            block: z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">;
+        }, z.core.$strip>>>;
         look?: z.ZodOptional<z.ZodObject<{
             brand: z.ZodDefault<z.ZodString>;
             accent: z.ZodDefault<z.ZodString>;
@@ -359,6 +363,10 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                 shareText: z.ZodOptional<z.ZodString>;
                 noindex: z.ZodDefault<z.ZodBoolean>;
             }, z.core.$strip>>;
+            saved: z.ZodDefault<z.ZodArray<z.ZodObject<{
+                name: z.ZodString;
+                block: z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">;
+            }, z.core.$strip>>>;
             look?: z.ZodOptional<z.ZodObject<{
                 brand: z.ZodDefault<z.ZodString>;
                 accent: z.ZodDefault<z.ZodString>;

package/dist/content/index.js

@@ -172,6 +172,12 @@ export function defineSite(blocks, o = {}) {
         ...(o.look ? { look: lookSchema(o.look) } : {}),
         ...o.extend,
         pages: z.array(page).min(1),
+        /** Sections the business put together and named, to add again anywhere ("Package card"): CalOS offers them beside the site's own kinds. */
+        saved: z
+            .array(z.object({ name: text.meta({ title: "Name" }), block: union }))
+            .max(30)
+            .default([])
+            .meta({ title: "Saved sections" }),
     })
         .superRefine((site, ctx) => {
         const s = site;

package/dist/next/index.d.ts

@@ -4,3 +4,5 @@ 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 { Slideshow } from "./slideshow.tsx";

package/dist/next/index.js

@@ -7,3 +7,5 @@ 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 { Slideshow } from "./slideshow.js";

package/dist/next/sections.d.ts

@@ -0,0 +1,23 @@
+export type KitBlock = {
+    type: string;
+    id?: string;
+    placement?: Record<string, unknown>;
+} & Record<string, unknown>;
+/**
+ * The site's own classes for a kit section's parts, each in place of the kit's: its band, its
+ * container, its heading, its words, and its buttons (the main one and a quieter one).
+ */
+export type KitClasses = {
+    section?: string;
+    wrap?: string;
+    heading?: string;
+    text?: string;
+    button?: string;
+    buttonQuiet?: string;
+};
+/** A block of one of the kit's types, drawn; null for any other (the site's own to draw). */
+export declare function KitSection({ s, level, classes }: {
+    s: KitBlock;
+    level?: number;
+    classes?: KitClasses;
+}): import("react").JSX.Element | null;

package/dist/next/sections.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { placementClass } from "../content/index.js";
+import { image } from "./data.js";
+import { Img } from "./parts/Img.js";
+import { Md } from "./parts/Md.js";
+import { Slideshow } from "./slideshow.js";
+/** A block of one of the kit's types, drawn; null for any other (the site's own to draw). */
+export function KitSection({ s, level = 2, classes = {} }) {
+    switch (s.type) {
+        case "gallery":
+            return _jsx(Gallery, { s: s, level: level, classes: classes });
+        case "slideshow":
+            return _jsx(Slides, { s: s, level: level, classes: classes });
+        case "own":
+            return _jsx(Own, { s: s, level: level, classes: classes });
+        default:
+            return null;
+    }
+}
+const RATIO = { square: "1/1", landscape: "4/3", portrait: "4/5", "as-taken": undefined };
+function Heading({ level, id, className, children }) {
+    const H = `h${Math.min(Math.max(level, 1), 6)}`;
+    return (_jsx(H, { id: id, className: className, children: children }));
+}
+/** Photos in a grid, each opening its largest copy; its heading and intro above when it has them. */
+function Gallery({ s, level, classes }) {
+    const columns = Number(s.columns ?? "3");
+    const headingId = s.heading ? `${s.id ?? "gallery"}-heading` : undefined;
+    return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-gallery", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap ?? "kit-wrap", children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.heading ?? "kit-heading", children: s.heading })), s.intro && _jsx(Md, { text: s.intro, top: level + 1, className: "kit-intro" }), _jsx("ul", { className: `kit-gallery-grid kit-cols-${columns}`, children: s.images.map((img) => {
+                        const copies = image(img.src).srcset;
+                        const largest = copies.at(-1)?.url ?? image(img.src).src;
+                        return (_jsx("li", { children: _jsxs("figure", { children: [_jsx("a", { href: largest, className: "kit-gallery-open", children: _jsx(Img, { src: img.src, alt: img.alt, sizes: `(min-width: 1024px) ${Math.round(100 / columns)}vw, 50vw`, ratio: RATIO[s.shape ?? "square"] }) }), img.caption && _jsx("figcaption", { children: img.caption })] }) }, img.src));
+                    }) })] }) }));
+}
+const SLIDE_RATIO = { wide: "kit-shape-wide", landscape: "kit-shape-landscape", square: "kit-shape-square" };
+/** Photos one at a time (Slideshow), each with its caption under it; its heading above when it has one. */
+function Slides({ s, level, classes }) {
+    const headingId = s.heading ? `${s.id ?? "slideshow"}-heading` : undefined;
+    return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-slideshow", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap ?? "kit-wrap", children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.heading ?? "kit-heading", children: s.heading })), _jsx(Slideshow, { label: s.heading ?? "Photos", seconds: s.seconds, className: SLIDE_RATIO[s.shape ?? "wide"], children: s.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: "(min-width: 1200px) 1200px, 100vw", eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) })] }) }));
+}
+const SHAPE = { "as-taken": undefined, landscape: "4/3", square: "1/1", portrait: "4/5" };
+const COLUMNS = { one: 1, two: 2, three: 3, four: 4, "wide-left": 2, "wide-right": 2 };
+/**
+ * A section of the business's own: its columns of parts, laid out as chosen, each part in the site's
+ * own classes where it gave them and the kit's otherwise. A heading is the page's next level down.
+ */
+function Own({ s, level, classes }) {
+    const n = COLUMNS[s.layout ?? "one"] ?? 1;
+    const columns = s.columns.slice(0, n);
+    return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-own", `kit-own-${s.tone ?? "plain"}`, placementClass(s)].filter(Boolean).join(" "), id: s.id, children: _jsx("div", { className: classes.wrap ?? "kit-wrap", children: _jsx("div", { className: `kit-own-grid kit-own-${s.layout ?? "one"} kit-own-align-${s.align ?? "left"}`, children: columns.map((c, i) => (_jsx("div", { className: "kit-own-column", children: c.parts.map((p, j) => (_jsx(OwnPart, { p: p, level: level, classes: classes, columns: n }, j))) }, i))) }) }) }));
+}
+function OwnPart({ p, level, classes, columns }) {
+    const width = `(min-width: 1024px) ${Math.round(100 / columns)}vw, 100vw`;
+    switch (p.type) {
+        case "heading": {
+            // Large is the section's own heading level; medium and small the levels under it.
+            const at = level + (p.size === "large" ? 0 : p.size === "small" ? 2 : 1);
+            return (_jsx(Heading, { level: at, className: [classes.heading ?? "kit-heading", `kit-own-h-${p.size ?? "medium"}`].join(" "), children: p.text }));
+        }
+        case "text":
+            return _jsx(Md, { text: p.text, top: level + 1, className: ["kit-own-text", classes.text].filter(Boolean).join(" ") });
+        case "photo":
+            return (_jsxs("figure", { className: "kit-own-photo", children: [_jsx(Img, { src: p.image.src, alt: p.image.alt, sizes: width, ratio: SHAPE[p.shape ?? "as-taken"] }), p.image.caption && _jsx("figcaption", { children: p.image.caption })] }));
+        case "button": {
+            const quiet = p.style === "quiet";
+            return (_jsx("p", { className: "kit-own-action", children: _jsx("a", { href: p.href, className: (quiet ? classes.buttonQuiet : classes.button) ?? (quiet ? "kit-button kit-button-quiet" : "kit-button"), children: p.label }) }));
+        }
+        case "list": {
+            const L = p.style === "numbers" ? "ol" : "ul";
+            return (_jsx(L, { className: ["kit-own-list", `kit-own-list-${p.style ?? "bullets"}`, classes.text].filter(Boolean).join(" "), children: p.items.map((item, i) => (_jsx("li", { children: item }, i))) }));
+        }
+        case "quote":
+            return (_jsxs("figure", { className: "kit-own-quote", children: [_jsx("blockquote", { className: classes.text, children: p.text }), p.who && _jsx("figcaption", { children: p.who })] }));
+        case "stats":
+            return (_jsx("dl", { className: "kit-own-stats", children: p.items.map((it, i) => (_jsxs("div", { children: [_jsx("dt", { children: it.label }), _jsx("dd", { children: it.value })] }, i))) }));
+        case "price":
+            return (_jsxs("p", { className: "kit-own-price", children: [_jsx("span", { className: "kit-own-amount", children: p.amount }), p.per && _jsxs("span", { className: "kit-own-per", children: [" ", p.per] }), p.note && _jsx("span", { className: "kit-own-note", children: p.note })] }));
+        case "gallery": {
+            const n = Number(p.columns ?? "3");
+            return (_jsx("ul", { className: `kit-gallery-grid kit-cols-${n}`, children: p.images.map((img) => (_jsx("li", { children: _jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: `(min-width: 1024px) ${Math.round(100 / (n * columns))}vw, 50vw`, ratio: "1/1" }), img.caption && _jsx("figcaption", { children: img.caption })] }) }, img.src))) }));
+        }
+        case "slideshow":
+            return (_jsx(Slideshow, { label: "Photos", seconds: p.seconds, className: "kit-shape-landscape", children: p.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: width, eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) }));
+        case "space":
+            return _jsx("div", { "aria-hidden": "true", className: `kit-own-space kit-own-space-${p.size ?? "medium"}` });
+    }
+}

package/dist/next/slideshow.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+export declare function Slideshow({ children, label, seconds, className, fill }: {
+    children: ReactNode;
+    label: string;
+    seconds?: number;
+    className?: string;
+    fill?: boolean;
+}): import("react").JSX.Element;

package/dist/next/slideshow.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Photos shown one at a time, fading from one to the next: on its own (the slideshow section) or
+// behind a site's own hero, whose words stay over it. The slides are drawn by the page (pictures at
+// the sizes the build made); this moves between them. Every few seconds while it's on screen and
+// not pointed at or focused, never for someone who's asked for less motion, with a button to stop it
+// (moving content must be stoppable) and one to show each photo. Classes only, so the content
+// security policy stands: data-active shows a slide, sections.css fades it.
+import { Children, useEffect, useRef, useState } from "react";
+export function Slideshow({ children, label, seconds = 5, className, fill = false }) {
+    const slides = Children.toArray(children);
+    const [at, setAt] = useState(0);
+    const [stopped, setStopped] = useState(false);
+    const [held, setHeld] = useState(false);
+    const [still, setStill] = useState(false);
+    const root = useRef(null);
+    const [seen, setSeen] = useState(true);
+    // Someone who's asked for less motion: it waits for them.
+    useEffect(() => {
+        const m = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const set = () => setStill(m.matches);
+        set();
+        m.addEventListener("change", set);
+        return () => m.removeEventListener("change", set);
+    }, []);
+    // Off screen, it waits.
+    useEffect(() => {
+        if (!root.current || typeof IntersectionObserver === "undefined")
+            return;
+        const o = new IntersectionObserver(([e]) => setSeen(!!e?.isIntersecting));
+        o.observe(root.current);
+        return () => o.disconnect();
+    }, []);
+    const moving = slides.length > 1 && !stopped && !held && !still && seen;
+    useEffect(() => {
+        if (!moving)
+            return;
+        const t = setTimeout(() => setAt((i) => (i + 1) % slides.length), Math.max(2, seconds) * 1000);
+        return () => clearTimeout(t);
+    }, [moving, at, seconds, slides.length]);
+    if (slides.length < 2)
+        return _jsx("div", { className: [fill ? "kit-slides kit-slides-fill" : "kit-slides", className].filter(Boolean).join(" "), children: slides });
+    return (_jsxs("div", { ref: root, role: "region", "aria-roledescription": "slideshow", "aria-label": label, className: [fill ? "kit-slides kit-slides-fill" : "kit-slides", className].filter(Boolean).join(" "), onPointerEnter: () => setHeld(true), onPointerLeave: () => setHeld(false), onFocus: () => setHeld(true), onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && setHeld(false), children: [slides.map((slide, i) => (_jsx("div", { className: "kit-slide", "data-active": i === at ? "" : undefined, "aria-hidden": i === at ? undefined : true, role: "group", "aria-roledescription": "slide", "aria-label": `${i + 1} of ${slides.length}`, children: slide }, i))), _jsxs("div", { className: "kit-slides-controls", children: [_jsx("button", { type: "button", className: "kit-slides-stop", onClick: () => setStopped((s) => !s), "aria-label": stopped || still ? "Play the slideshow" : "Pause the slideshow", "aria-pressed": stopped, children: _jsx("span", { "aria-hidden": "true", children: stopped || still ? "▶" : "❚❚" }) }), slides.map((_, i) => (_jsx("button", { type: "button", className: "kit-slides-dot", "aria-label": `Show photo ${i + 1} of ${slides.length}`, "aria-current": i === at ? "true" : undefined, onClick: () => setAt(i) }, i)))] })] }));
+}

package/dist/sections/index.d.ts

@@ -0,0 +1,204 @@
+import { z } from "zod";
+/** Photos in a grid, each with a caption if it has one: their work, the place, the team at it. */
+export declare const gallery: z.ZodObject<{
+    heading: z.ZodOptional<z.ZodString>;
+    intro: z.ZodOptional<z.ZodString>;
+    images: z.ZodArray<z.ZodObject<{
+        src: z.ZodString;
+        alt: z.ZodString;
+        caption: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    columns: z.ZodDefault<z.ZodEnum<{
+        2: "2";
+        3: "3";
+        4: "4";
+    }>>;
+    shape: z.ZodDefault<z.ZodEnum<{
+        square: "square";
+        landscape: "landscape";
+        portrait: "portrait";
+        "as-taken": "as-taken";
+    }>>;
+}, z.core.$strip>;
+/** Photos one at a time, fading from one to the next, each with a caption if it has one. */
+export declare const slideshow: z.ZodObject<{
+    heading: z.ZodOptional<z.ZodString>;
+    images: z.ZodArray<z.ZodObject<{
+        src: z.ZodString;
+        alt: z.ZodString;
+        caption: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    shape: z.ZodDefault<z.ZodEnum<{
+        square: "square";
+        wide: "wide";
+        landscape: "landscape";
+    }>>;
+    seconds: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>;
+export declare const parts: {
+    readonly heading: z.ZodObject<{
+        text: z.ZodString;
+        size: z.ZodDefault<z.ZodEnum<{
+            small: "small";
+            large: "large";
+            medium: "medium";
+        }>>;
+    }, z.core.$strip>;
+    readonly text: z.ZodObject<{
+        text: z.ZodString;
+    }, z.core.$strip>;
+    readonly photo: z.ZodObject<{
+        image: z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>;
+        shape: z.ZodDefault<z.ZodEnum<{
+            square: "square";
+            landscape: "landscape";
+            portrait: "portrait";
+            "as-taken": "as-taken";
+        }>>;
+    }, z.core.$strip>;
+    readonly button: z.ZodObject<{
+        label: z.ZodString;
+        href: z.ZodString;
+        style: z.ZodDefault<z.ZodEnum<{
+            main: "main";
+            quiet: "quiet";
+        }>>;
+    }, z.core.$strip>;
+    readonly list: z.ZodObject<{
+        items: z.ZodArray<z.ZodString>;
+        style: z.ZodDefault<z.ZodEnum<{
+            checks: "checks";
+            bullets: "bullets";
+            numbers: "numbers";
+        }>>;
+    }, z.core.$strip>;
+    readonly quote: z.ZodObject<{
+        text: z.ZodString;
+        who: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    readonly stats: z.ZodObject<{
+        items: z.ZodArray<z.ZodObject<{
+            value: z.ZodString;
+            label: z.ZodString;
+        }, z.core.$strip>>;
+    }, z.core.$strip>;
+    readonly price: z.ZodObject<{
+        amount: z.ZodString;
+        per: z.ZodOptional<z.ZodString>;
+        note: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    readonly gallery: z.ZodObject<{
+        images: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        columns: z.ZodDefault<z.ZodEnum<{
+            2: "2";
+            3: "3";
+            4: "4";
+        }>>;
+    }, z.core.$strip>;
+    readonly slideshow: z.ZodObject<{
+        images: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        seconds: z.ZodDefault<z.ZodNumber>;
+    }, z.core.$strip>;
+    readonly space: z.ZodObject<{
+        size: z.ZodDefault<z.ZodEnum<{
+            small: "small";
+            large: "large";
+            medium: "medium";
+        }>>;
+    }, z.core.$strip>;
+};
+export type PartType = keyof typeof parts;
+/** A section of the business's own: columns of parts, laid out as chosen, in the site's design. */
+export declare const own: z.ZodObject<{
+    layout: z.ZodDefault<z.ZodEnum<{
+        one: "one";
+        two: "two";
+        three: "three";
+        four: "four";
+        "wide-left": "wide-left";
+        "wide-right": "wide-right";
+    }>>;
+    align: z.ZodDefault<z.ZodEnum<{
+        left: "left";
+        center: "center";
+    }>>;
+    tone: z.ZodDefault<z.ZodEnum<{
+        brand: "brand";
+        plain: "plain";
+    }>>;
+    columns: z.ZodArray<z.ZodObject<{
+        parts: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">>;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
+/** Every section the kit draws, by the type a block names. */
+export declare const sections: {
+    readonly gallery: z.ZodObject<{
+        heading: z.ZodOptional<z.ZodString>;
+        intro: z.ZodOptional<z.ZodString>;
+        images: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        columns: z.ZodDefault<z.ZodEnum<{
+            2: "2";
+            3: "3";
+            4: "4";
+        }>>;
+        shape: z.ZodDefault<z.ZodEnum<{
+            square: "square";
+            landscape: "landscape";
+            portrait: "portrait";
+            "as-taken": "as-taken";
+        }>>;
+    }, z.core.$strip>;
+    readonly slideshow: z.ZodObject<{
+        heading: z.ZodOptional<z.ZodString>;
+        images: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        shape: z.ZodDefault<z.ZodEnum<{
+            square: "square";
+            wide: "wide";
+            landscape: "landscape";
+        }>>;
+        seconds: z.ZodDefault<z.ZodNumber>;
+    }, z.core.$strip>;
+    readonly own: z.ZodObject<{
+        layout: z.ZodDefault<z.ZodEnum<{
+            one: "one";
+            two: "two";
+            three: "three";
+            four: "four";
+            "wide-left": "wide-left";
+            "wide-right": "wide-right";
+        }>>;
+        align: z.ZodDefault<z.ZodEnum<{
+            left: "left";
+            center: "center";
+        }>>;
+        tone: z.ZodDefault<z.ZodEnum<{
+            brand: "brand";
+            plain: "plain";
+        }>>;
+        columns: z.ZodArray<z.ZodObject<{
+            parts: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>;
+};
+export type KitSectionType = keyof typeof sections;
+export declare const isKitSection: (type: string) => type is KitSectionType;

package/dist/sections/index.js

@@ -0,0 +1,69 @@
+// Sections any site can use, built once here so a site gets them with a kit update rather than code of
+// its own (README, "Sections"): each one's fields here, drawn by KitSection (../next/sections.tsx) and
+// styled by sections.css, themed by the site's Look. A site takes them all into its blocks
+// (`defineSite({ ...blocks, ...sections })`); one of its own by the same name is kept over the kit's.
+import { z } from "zod";
+import { href, image, md, text } from "../content/index.js";
+/** Photos in a grid, each with a caption if it has one: their work, the place, the team at it. */
+export const gallery = z
+    .object({
+    heading: text.optional().meta({ title: "Heading" }),
+    intro: md.optional().meta({ title: "Intro" }),
+    images: z
+        .array(image.extend({ caption: text.optional().meta({ title: "Caption" }) }))
+        .min(1)
+        .max(60)
+        .meta({ title: "Photos" }),
+    columns: z.enum(["2", "3", "4"]).default("3").meta({ title: "Photos across" }),
+    shape: z.enum(["square", "landscape", "portrait", "as-taken"]).default("square").meta({ title: "Shape" }),
+})
+    .meta({ title: "Gallery", description: "Photos in a grid, each with an optional caption" });
+/** Photos one at a time, fading from one to the next, each with a caption if it has one. */
+export const slideshow = z
+    .object({
+    heading: text.optional().meta({ title: "Heading" }),
+    images: z
+        .array(image.extend({ caption: text.optional().meta({ title: "Caption" }) }))
+        .min(2)
+        .max(20)
+        .meta({ title: "Photos" }),
+    shape: z.enum(["wide", "landscape", "square"]).default("wide").meta({ title: "Shape" }),
+    seconds: z.number().int().min(3).max(15).default(5).meta({ title: "Seconds on each photo" }),
+})
+    .meta({ title: "Slideshow", description: "Photos one at a time, fading from one to the next" });
+/**
+ * The parts a section of the business's own is put together from in CalOS: each drawn in the site's
+ * own type, buttons and widths (the classes it gives KitSection), so what's built looks like the
+ * site, not a template. A fixed set, no colours or fonts of their own.
+ */
+const photo = image.extend({ caption: text.optional().meta({ title: "Caption" }) });
+export const parts = {
+    heading: z.object({ text, size: z.enum(["large", "medium", "small"]).default("medium").meta({ title: "Size" }) }).meta({ title: "Heading" }),
+    text: z.object({ text: md }).meta({ title: "Text" }),
+    photo: z.object({ image: photo, shape: z.enum(["as-taken", "landscape", "square", "portrait"]).default("as-taken").meta({ title: "Shape" }) }).meta({ title: "Photo" }),
+    button: z.object({ label: text.meta({ title: "Label" }), href, style: z.enum(["main", "quiet"]).default("main").meta({ title: "Style" }) }).meta({ title: "Button" }),
+    list: z.object({ items: z.array(text).min(1).max(20).meta({ title: "Items" }), style: z.enum(["bullets", "checks", "numbers"]).default("bullets").meta({ title: "Style" }) }).meta({ title: "List" }),
+    quote: z.object({ text: text.meta({ title: "Quote" }), who: text.optional().meta({ title: "Who said it" }) }).meta({ title: "Quote" }),
+    stats: z.object({ items: z.array(z.object({ value: text.meta({ title: "Number" }), label: text.meta({ title: "What it is" }) })).min(1).max(6).meta({ title: "Facts" }) }).meta({ title: "Facts in a row", description: "8 guests · 4 cabins · 2 baths" }),
+    price: z.object({ amount: text.meta({ title: "Price" }), per: text.optional().meta({ title: "Per" }), note: text.optional().meta({ title: "Note" }) }).meta({ title: "Price" }),
+    gallery: z.object({ images: z.array(photo).min(1).max(30).meta({ title: "Photos" }), columns: z.enum(["2", "3", "4"]).default("3").meta({ title: "Photos across" }) }).meta({ title: "Photos in a grid" }),
+    slideshow: z.object({ images: z.array(photo).min(2).max(20).meta({ title: "Photos" }), seconds: z.number().int().min(3).max(15).default(5).meta({ title: "Seconds on each photo" }) }).meta({ title: "Slideshow" }),
+    space: z.object({ size: z.enum(["small", "medium", "large"]).default("medium").meta({ title: "Size" }) }).meta({ title: "Space" }),
+};
+const part = z.discriminatedUnion("type", Object.keys(parts).map((type) => z.object({ type: z.literal(type) }).extend(parts[type].shape).meta(parts[type].meta())));
+/** A section of the business's own: columns of parts, laid out as chosen, in the site's design. */
+export const own = z
+    .object({
+    layout: z.enum(["one", "two", "three", "four", "wide-left", "wide-right"]).default("one").meta({ title: "Columns" }),
+    align: z.enum(["left", "center"]).default("left").meta({ title: "Align" }),
+    tone: z.enum(["plain", "brand"]).default("plain").meta({ title: "Background" }),
+    columns: z
+        .array(z.object({ parts: z.array(part).max(12).meta({ title: "Parts" }) }).meta({ title: "Column" }))
+        .min(1)
+        .max(4)
+        .meta({ title: "Columns' parts" }),
+})
+    .meta({ title: "Your own section", description: "Put together from headings, text, photos, buttons and more, in the site's design" });
+/** Every section the kit draws, by the type a block names. */
+export const sections = { gallery, slideshow, own };
+export const isKitSection = (type) => Object.prototype.hasOwnProperty.call(sections, type);

package/dist/sections.css

@@ -0,0 +1,358 @@
+/*
+ * The kit's sections (@caltho/site-kit/sections), styled to sit in any site: its width, spacing and
+ * type, themed by the site's Look (--look-*) where it has one and its own fonts and colours otherwise.
+ * Import once in the site's layout: import "@caltho/site-kit/sections.css".
+ */
+.kit-section {
+  padding-block: clamp(48px, 8vw, 96px);
+}
+.kit-wrap {
+  width: min(1200px, 100% - 40px);
+  margin-inline: auto;
+}
+.kit-heading {
+  margin: 0 0 12px;
+  font-family: var(--look-heading-font, inherit);
+  font-size: clamp(1.6rem, 3vw, 2.25rem);
+  line-height: 1.15;
+}
+.kit-intro {
+  max-width: 65ch;
+  margin-top: 12px;
+  margin-bottom: 28px;
+}
+/* Room after a heading, whoever's class it wears (a site's own may have no margin). */
+:is(h1, h2, h3, h4, h5, h6) + .kit-gallery-grid,
+:is(h1, h2, h3, h4, h5, h6) + .kit-slides {
+  margin-top: 24px;
+}
+
+/* Gallery: two across on a phone, as many as chosen from a tablet up. */
+.kit-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: clamp(8px, 1.5vw, 16px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+@media (min-width: 720px) {
+  .kit-cols-3,
+  .kit-cols-4 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1024px) {
+  .kit-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+.kit-gallery figure {
+  margin: 0;
+}
+.kit-gallery-open {
+  display: block;
+  border-radius: var(--look-radius, 8px);
+}
+.kit-gallery-open:focus-visible {
+  outline: 3px solid var(--look-accent, currentColor);
+  outline-offset: 3px;
+}
+.kit-gallery img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--look-radius, 8px);
+  object-fit: cover;
+}
+.kit-gallery img.ratio-1-1 {
+  aspect-ratio: 1 / 1;
+}
+.kit-gallery img.ratio-4-3 {
+  aspect-ratio: 4 / 3;
+}
+.kit-gallery img.ratio-4-5 {
+  aspect-ratio: 4 / 5;
+}
+.kit-gallery figcaption {
+  margin-top: 8px;
+  font-size: 0.9rem;
+  opacity: 0.75;
+}
+
+/*
+ * Slideshow: the slides stacked, the one showing faded in. In a box of its own shape (the section),
+ * or filling what it's in (`fill`: behind a hero's words). Controls bottom right, over the photos.
+ */
+.kit-slides {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--look-radius, 8px);
+}
+.kit-slides-fill {
+  position: absolute;
+  inset: 0;
+  border-radius: 0;
+}
+.kit-shape-wide {
+  aspect-ratio: 16 / 9;
+}
+.kit-shape-landscape {
+  aspect-ratio: 4 / 3;
+}
+.kit-shape-square {
+  aspect-ratio: 1 / 1;
+}
+.kit-slide {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.8s ease,
+    visibility 0.8s;
+}
+.kit-slide[data-active] {
+  opacity: 1;
+  visibility: visible;
+}
+.kit-slide figure {
+  margin: 0;
+  height: 100%;
+}
+.kit-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.kit-slide figcaption {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  padding: 28px 16px 12px;
+  background: linear-gradient(transparent, rgb(0 0 0 / 0.55));
+  color: #fff;
+  font-size: 0.9rem;
+}
+.kit-slides-controls {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 0.35);
+}
+.kit-slides-stop {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: #fff;
+  font-size: 10px;
+  cursor: pointer;
+}
+.kit-slides-dot {
+  width: 8px;
+  height: 8px;
+  border: 0;
+  padding: 0;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 0.5);
+  cursor: pointer;
+}
+.kit-slides-dot[aria-current] {
+  background: #fff;
+}
+.kit-slides-stop:focus-visible,
+.kit-slides-dot:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+/* Bigger targets for a finger, the dot itself as it was. */
+@media (pointer: coarse) {
+  .kit-slides-dot {
+    width: 10px;
+    height: 10px;
+  }
+  .kit-slides-controls {
+    gap: 12px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-slide {
+    transition: none;
+  }
+}
+
+/*
+ * A section of the business's own: its columns side by side from a tablet up (stacked on a phone),
+ * its parts spaced evenly, in the site's type. Brand tone: the site's brand colour behind, its
+ * readable colour over it.
+ */
+.kit-own-brand {
+  background: var(--look-brand, #111);
+  color: var(--look-on-brand, #fff);
+}
+.kit-own-grid {
+  display: grid;
+  gap: clamp(24px, 4vw, 48px);
+}
+@media (min-width: 720px) {
+  .kit-own-two,
+  .kit-own-four {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .kit-own-three {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .kit-own-wide-left {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  }
+  .kit-own-wide-right {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  }
+}
+@media (min-width: 1024px) {
+  .kit-own-four {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+.kit-own-align-center {
+  text-align: center;
+}
+.kit-own-align-center .kit-own-text,
+.kit-own-align-center .kit-own-list {
+  margin-inline: auto;
+}
+.kit-own-column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.kit-own-column > * {
+  margin: 0;
+}
+.kit-own-h-large {
+  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+}
+.kit-own-h-small {
+  font-size: 1.15rem;
+}
+.kit-own-text {
+  max-width: 65ch;
+}
+.kit-own-photo {
+  margin: 0;
+}
+.kit-own-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--look-radius, 8px);
+  object-fit: cover;
+}
+.kit-own-photo img.ratio-1-1 {
+  aspect-ratio: 1 / 1;
+}
+.kit-own-photo img.ratio-4-3 {
+  aspect-ratio: 4 / 3;
+}
+.kit-own-photo img.ratio-4-5 {
+  aspect-ratio: 4 / 5;
+}
+.kit-own-photo figcaption,
+.kit-own-quote figcaption {
+  margin-top: 8px;
+  font-size: 0.9rem;
+  opacity: 0.75;
+}
+.kit-button {
+  display: inline-block;
+  padding: 10px 18px;
+  border: 1px solid var(--look-button-border, currentColor);
+  border-radius: var(--look-button-radius, 8px);
+  background: var(--look-button-bg, #111);
+  color: var(--look-button-fg, #fff);
+  font-weight: 500;
+  text-decoration: none;
+}
+.kit-button-quiet {
+  background: transparent;
+  color: inherit;
+}
+.kit-own-list {
+  max-width: 65ch;
+  padding-left: 1.25em;
+}
+.kit-own-list li + li {
+  margin-top: 6px;
+}
+.kit-own-list-checks {
+  list-style: none;
+  padding-left: 0;
+}
+.kit-own-list-checks li::before {
+  content: "✓";
+  margin-right: 8px;
+  color: var(--look-accent, currentColor);
+}
+.kit-own-quote {
+  margin: 0;
+}
+.kit-own-quote blockquote {
+  margin: 0;
+  font-size: 1.15rem;
+  line-height: 1.5;
+}
+.kit-own-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 32px;
+}
+.kit-own-align-center .kit-own-stats {
+  justify-content: center;
+}
+.kit-own-stats div {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.kit-own-stats dd {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1.1;
+}
+.kit-own-stats dt {
+  font-size: 0.85rem;
+  opacity: 0.75;
+}
+.kit-own-amount {
+  font-size: 2rem;
+  font-weight: 600;
+}
+.kit-own-per {
+  opacity: 0.75;
+}
+.kit-own-note {
+  display: block;
+  font-size: 0.85rem;
+  opacity: 0.75;
+}
+.kit-own-space-small {
+  height: 8px;
+}
+.kit-own-space-medium {
+  height: 24px;
+}
+.kit-own-space-large {
+  height: 56px;
+}

package/dist/sections.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/sections.test.js

@@ -0,0 +1,134 @@
+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 { 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";
+// 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", () => {
+    it("join a site's own blocks, and one of the site's by the same name is kept over the kit's", () => {
+        const site = defineSite({ ...sections, ...own });
+        const page = (blocks) => ({ url: "https://acme.example", business: { name: "Acme" }, pages: [{ path: "/", title: "Acme", description: "Acme does things.", blocks }] });
+        const ok = site.parse(page([{ type: "gallery", images: [{ src: "a.jpg", alt: "A deck" }] }]));
+        expect(ok.problems).toBeUndefined();
+        // Its defaults: three across, square.
+        expect(ok.site.pages[0].blocks[0]).toMatchObject({ type: "gallery", columns: "3", shape: "square" });
+        expect(site.parse(page([{ type: "gallery", images: [] }])).problems?.join(" ")).toMatch(/images/);
+        const theirs = defineSite({ ...sections, gallery: z.object({ photos: z.array(z.string()) }) });
+        expect(theirs.parse(page([{ type: "gallery", photos: ["a.jpg"] }])).problems).toBeUndefined();
+        expect(isKitSection("gallery")).toBe(true);
+        expect(isKitSection("hero")).toBe(false);
+    });
+    it("are named for CalOS's editor", () => {
+        expect(gallery.meta()?.title).toBe("Gallery");
+    });
+});
+describe("a gallery, drawn", () => {
+    setPrepared({
+        site: { url: "https://acme.example", lang: "en", business: { name: "Acme" }, redirects: [], pages: [] },
+        images: {
+            "a.jpg": { width: 1600, height: 1200, src: "/_img/a.1600.jpg", srcset: [{ url: "/_img/a.640.webp", w: 640 }, { url: "/_img/a.1600.webp", w: 1600 }] },
+            "b.jpg": { width: 800, height: 1000, src: "/_img/b.800.jpg", srcset: [] },
+        },
+        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>');
+        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">');
+        expect(html).toContain('<a href="/_img/b.800.jpg" class="kit-gallery-open">');
+        expect(html).toContain('alt="A cedar deck"');
+        expect(html).toContain("ratio-4-3");
+        expect(html).toContain("<figcaption>Cedar, 2026</figcaption>");
+        expect(html.match(/<figcaption>/g)).toHaveLength(1);
+        // No style attribute: the content security policy would block it.
+        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" } }));
+        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("");
+    });
+});
+describe("a slideshow", () => {
+    it("shows the first photo, the rest hidden from a screen reader till they're shown, with a button to stop it and one for each photo", () => {
+        const html = renderToStaticMarkup(_jsxs(Slideshow, { label: "The boat", seconds: 6, children: [_jsx("img", { alt: "One", src: "/1.jpg" }), _jsx("img", { alt: "Two", src: "/2.jpg" }), _jsx("img", { alt: "Three", src: "/3.jpg" })] }));
+        expect(html).toContain('role="region" aria-roledescription="slideshow" aria-label="The boat"');
+        expect(html.match(/class="kit-slide"/g)).toHaveLength(3);
+        expect(html).toContain('class="kit-slide" data-active="" role="group" aria-roledescription="slide" aria-label="1 of 3"');
+        expect(html.match(/aria-hidden="true" role="group"/g)).toHaveLength(2);
+        expect(html).toContain('aria-label="Pause the slideshow"');
+        expect(html).toContain('aria-label="Show photo 3 of 3"');
+        expect(html.match(/aria-current="true"/g)).toHaveLength(1);
+        expect(html).not.toMatch(/\sstyle=/);
+    });
+    it("is a single photo, with nothing to move between, when it has one", () => {
+        const html = renderToStaticMarkup(_jsx(Slideshow, { label: "The boat", fill: true, children: _jsx("img", { alt: "One", src: "/1.jpg" }) }));
+        expect(html).toContain('<div class="kit-slides kit-slides-fill"><img alt="One" src="/1.jpg"/></div>');
+        expect(html).not.toContain("kit-slides-controls");
+    });
+    it("as a section: two photos at least, five seconds each unless it says, wide unless it says", () => {
+        const site = defineSite({ ...sections });
+        const page = (blocks) => ({ url: "https://acme.example", business: { name: "Acme" }, pages: [{ path: "/", title: "Acme", description: "Acme does things.", blocks }] });
+        const ok = site.parse(page([{ type: "slideshow", images: [{ src: "a.jpg", alt: "A" }, { src: "b.jpg", alt: "B" }] }]));
+        expect(ok.problems).toBeUndefined();
+        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" }] } }));
+        expect(html).toContain('class="kit-slides kit-shape-landscape"');
+        expect(html).toContain("<figcaption>Cabin</figcaption>");
+        expect(html).toContain('aria-label="On board"');
+    });
+});
+describe("a section of the business's own", () => {
+    const page = (blocks, saved = []) => ({ url: "https://acme.example", business: { name: "Acme" }, saved, pages: [{ path: "/", title: "Acme", description: "Acme does things.", blocks }] });
+    const block = {
+        type: "own",
+        layout: "two",
+        columns: [
+            { parts: [{ type: "heading", text: "Our packages", size: "large" }, { type: "text", text: "Pick **the one** that suits." }, { type: "list", items: ["Captain", "Food"], style: "checks" }, { type: "button", label: "Book", href: "/" }] },
+            { parts: [{ type: "price", amount: "$120", per: "a night", note: "per person" }, { type: "stats", items: [{ value: "8", label: "guests" }, { value: "4", label: "cabins" }] }, { type: "quote", text: "Best week ever.", who: "Ana" }] },
+        ],
+    };
+    it("is put together from parts, checked like any section, and can be saved by name to add again", () => {
+        const site = defineSite({ ...sections });
+        const ok = site.parse(page([block], [{ name: "Package card", block }]));
+        expect(ok.problems).toBeUndefined();
+        expect(ok.site.pages[0].blocks[0]).toMatchObject({ align: "left", tone: "plain" });
+        expect(ok.site.saved[0].name).toBe("Package card");
+        // A part it doesn't know, or a list with nothing in it, is said.
+        expect(site.parse(page([{ ...block, columns: [{ parts: [{ type: "marquee" }] }] }])).problems?.join(" ")).toMatch(/type/);
+        expect(site.parse(page([{ ...block, columns: [{ parts: [{ type: "list", items: [] }] }] }])).problems?.join(" ")).toMatch(/items/);
+        // Saved sections are optional: a site without any is as it was.
+        expect(site.parse(page([block])).site.saved).toEqual([]);
+    });
+    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" } }));
+        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("<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("<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" } }));
+        expect(html.match(/kit-own-column/g)).toHaveLength(1);
+        expect(html).toContain('class="kit-button"');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caltho/site-kit",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "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",
@@ -44,13 +44,18 @@
     "./next/preview": {
       "types": "./dist/next/preview.d.ts",
       "default": "./dist/next/preview.js"
-    }
+    },
+    "./sections": {
+      "types": "./dist/sections/index.d.ts",
+      "default": "./dist/sections/index.js"
+    },
+    "./sections.css": "./dist/sections.css"
   },
   "engines": {
     "node": ">=22.18"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp -R src/fonts dist/fonts && chmod +x dist/cli/index.js",
+    "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",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "bun test src",
     "prepack": "bun run build"
@@ -86,10 +91,12 @@
     "@types/bun": "1.4.2",
     "@types/node": "22.20.5",
     "@types/react": "19.3.0",
+    "@types/react-dom": "19.2.3",
     "axe-core": "4.14.0",
     "next": "16.4.1",
     "playwright": "1.63.0",
     "react": "19.3.0",
+    "react-dom": "19.3.0",
     "typescript": "6.0.3"
   },
   "bugs": {