@caltho/site-kit 0.2.7 → 0.2.9

package/README.md

@@ -57,7 +57,7 @@ the kit only checks it's a URL.
 | --- | --- |
 | **Content** (`@caltho/site-kit/content`) | `defineSite` and the pieces to build blocks from (`text`, `md`, `image`, `link`, `href`, `business`, …); the checks, including that every link lands on a page and every `#part` exists; the JSON Schema. |
 | **prepare** | Loads the content from CalOS (`CALOS_CONTENT_URL`, `CALOS_SITE_TOKEN`; the site's own while nothing's published there) or `content/site.json`, sends CalOS the schema, checks it, writes the schema, and makes every picture the content names as WebP at the widths screens need plus a 1200×630 share crop, named by content so they cache for a year. |
-| **finish** | After the framework's build: a content security policy in every page (each inline script named by hash), `_headers` (security headers, long caching, `noindex` on preview addresses), and `_redirects` from CalOS (`CALOS_REDIRECTS_URL`; a build that can't reach CalOS fails rather than lose them). Where CalOS counts the site's visits (its content answer says where they go), the analytics script in every published page but the preview, with its addresses in the policy, and phone and map links marked so a tap is counted (`phone_tap`, `directions_tap`; a link marked `data-track` already is left as it is). No cookies. |
+| **finish** | After the framework's build: a content security policy in every page (each inline script named by hash), `_headers` (security headers, long caching, `noindex` on preview addresses), and `_redirects` from CalOS (`CALOS_REDIRECTS_URL`; a build that can't reach CalOS fails rather than lose them). Where CalOS counts the site's visits (its content answer says where they go), the analytics script in every published page but the preview, with its addresses in the policy, and phone and map links marked so a tap is counted (`phone_tap`, `directions_tap`; a link marked `data-track` already is left as it is). No cookies. The standard privacy policy then leaves out its claim of no analytics, saying nothing in its place: what to say of the counting is the business's (`extra`). |
 | **check** | Every page in a real browser on a computer and a phone: fails on anything the policy blocks and anything that doesn't load. What axe finds (WCAG 2.0–2.2 A and AA, best practice) is said with where, for the site to weigh (a colour the business chose over the contrast rule is their choice); `--strict` fails on it too, `--allow=rule,rule` leaves named rules out. |
 | **Search** | Titles that fit, canonical addresses, the business as schema.org data (hours, areas, address), FAQ and breadcrumb data, robots.txt, the sitemap. |
 | **Policies** | Privacy, accessibility and terms, written from the business's facts and what the site does. Optional: a site calls `policy()` where it wants them. |
@@ -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/content/index.d.ts

@@ -170,7 +170,8 @@ export type SiteBase = {
     footer?: Footer;
     look?: Look;
     redirects: Redirect[]; /** Whether page paths end in a slash (the default). */
-    trailingSlash?: boolean;
+    trailingSlash?: boolean; /** Set by prepare, never in content: CalOS counts this site's visits (its pages carry the script), which its privacy policy says. */
+    countsVisits?: boolean;
 };
 /**
  * The site's menu, as its header draws it: the one edited in CalOS (its links in order, one picked out,

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/policies.js

@@ -1,8 +1,11 @@
 // The policy pages a business's site should have, written from what the business has told us and
 // what the template actually does: no cookies, no analytics, no third-party requests, a contact
 // form that goes to the business's CalOS. So the words stay true as the site changes: add a
-// tracker to the template and this is where it has to be said. Plain language, US-first; a
-// business adds its own paragraphs with `extra`, and should have a lawyer read them once.
+// tracker to the template and this is where it has to be said. Where the business has CalOS count
+// its visits (prepare marks it: site.countsVisits), the claim of no analytics is left out and
+// nothing said in its place: what to say of the counting is the business's, in `extra` (CalOS
+// suggests a paragraph as they turn it on). Plain language, US-first; a business adds its own
+// paragraphs with `extra`, and should have a lawyer read them once.
 /**
  * `collectsFromForm`: the site has a form that takes a visitor's name, email and message, which the
  * privacy policy says (it defaults to the site having a form address).
@@ -13,6 +16,7 @@ export function policy(site, which, o = {}) {
     const reach = [b.email ? `email [${b.email}](mailto:${b.email})` : null, b.phone ? `call ${b.phone}` : null].filter(Boolean).join(" or ");
     const place = b.address ? `${b.address.locality}, ${b.address.region}` : null;
     const hasForm = o.collectsFromForm ?? !!site.form;
+    const counts = !!site.countsVisits;
     if (which === "privacy") {
         return {
             title: "Privacy policy",
@@ -27,7 +31,9 @@ export function policy(site, which, o = {}) {
                 ]
                     .filter(Boolean)
                     .join("\n"),
-                `This site doesn't use cookies, advertising or analytics trackers. Its fonts and pictures come from this site itself, so visiting it doesn't tell anyone else you were here.`,
+                counts
+                    ? `This site doesn't use cookies or advertising trackers. Its fonts and pictures come from this site itself.`
+                    : `This site doesn't use cookies, advertising or analytics trackers. Its fonts and pictures come from this site itself, so visiting it doesn't tell anyone else you were here.`,
                 `## How we use it`,
                 `To answer you, to quote for and do the work you ask about, and to keep the records the law requires. We keep enquiries in our customer records system, which Caltho runs for us. We don't sell or rent your information, and we don't share it for advertising. The companies that help us run this site and our business (hosting, email, records) only use it to do that for us.`,
                 `## How long we keep it`,

package/dist/prepare.js

@@ -92,6 +92,11 @@ export async function prepare(root, env = process.env, log = console.log) {
     if (parsed.problems)
         throw new Error(`The site's content needs fixing (${from}):\n  - ${parsed.problems.join("\n  - ")}`);
     const site = parsed.site;
+    // Its pages will count visits (finish puts the script in): what its privacy policy says follows.
+    if (analytics)
+        site.countsVisits = true;
+    else
+        delete site.countsVisits;
     for (const w of parsed.warnings)
         log(`site-kit: warning: ${w}`);
     const schema = definition.jsonSchema();

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.7",
+  "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": {