@caltho/site-kit 0.2.8 → 0.2.9

package/README.md

@@ -66,6 +66,38 @@ 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).
+
+`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" }} />`.
+
 ## Share cards
 
 Each page is shared (Open Graph) with a 1200×630 card made at build from its words: its title and

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,17 @@
+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. */
+export type KitClasses = {
+    section?: string;
+    wrap?: string;
+    heading?: 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,38 @@
+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 });
+        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))) })] }) }));
+}

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,76 @@
+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>;
+/** 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>;
+};
+export type KitSectionType = keyof typeof sections;
+export declare const isKitSection: (type: string) => type is KitSectionType;

package/dist/sections/index.js

@@ -0,0 +1,36 @@
+// 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 { 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" });
+/** Every section the kit draws, by the type a block names. */
+export const sections = { gallery, slideshow };
+export const isKitSection = (type) => Object.prototype.hasOwnProperty.call(sections, type);

package/dist/sections.css

@@ -0,0 +1,193 @@
+/*
+ * 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;
+  }
+}

package/dist/sections.test.d.ts

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

package/dist/sections.test.js

@@ -0,0 +1,94 @@
+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"');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caltho/site-kit",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "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": {