@caltho/site-kit 0.1.1 → 0.2.0

package/README.md

@@ -1,7 +1,7 @@
 # site-kit
 
 What every Caltho site is built with, published to npm as `@caltho/site-kit`. Each client's site is its
-own repository with its own design, started from [site-starter](https://github.com/trycaltho/site-starter).
+own repository with its own design, started from [site-starter](https://github.com/caltho-sites/site-starter).
 The kit is not a design system. It's the contract that lets CalOS manage any of those sites, and the
 plumbing every one of them needs.
 
@@ -33,6 +33,21 @@ export default defineSite({
   remove. Add a kind of block to a site and it appears in CalOS with no work on CalOS's side.
 - A new page is a new entry in the list with a path; the site's catch-all route renders it.
 
+**Editing on the page.** A site gives CalOS a page at `/calos-preview` that draws a draft with the
+site's own components, as CalOS sends it (`SitePreview` from `@caltho/site-kit/next/preview`):
+
+```tsx
+// app/calos-preview/page.tsx
+import { previewOrigins } from "@caltho/site-kit/next";
+import { Preview } from "@/components/Preview"; // "use client": <SitePreview origins={origins} render={(page) => <SitePage page={page} />} />
+export default function CalosPreview() { return <Preview origins={previewOrigins()} />; }
+```
+
+Components read content only through the kit (`site()`, `image()`), so the same components draw the
+built pages (from `.site/prepared.json`) and the draft (from CalOS). A click on the preview is matched
+back to the field it meant with nothing added to the components. Only the business's own CalOS
+addresses, which the build is given with the content, may frame the page or send it anything.
+
 Forms are separate and optional. A block can post to any address (a CalOS form, another service, or none);
 the kit only checks it's a URL.
 
@@ -41,13 +56,15 @@ the kit only checks it's a URL.
 | part | what it does |
 | --- | --- |
 | **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`) or `content/site.json`, 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. |
+| **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). |
 | **check** | Every page in a real browser through axe (WCAG 2.0–2.2 A and AA, best practice) on a computer and a phone; fails on any violation, on anything the policy blocks, and on anything that doesn't load. |
 | **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. |
 | **Helpers for components** (`@caltho/site-kit/lib`) | The pieces that touch no files: `md` (Markdown that can't run HTML), `plain`, `policy`, the search data, `imagesIn`, `clock`, `dayRange`, `telHref`. |
-| **Next.js helpers** (`@caltho/site-kit/next`) | The prepared content, a page by its path, page metadata, `Img` (the prepared widths), `Md` (Markdown that can't run HTML), `JsonLd`. Server components only. |
+| **Next.js helpers** (`@caltho/site-kit/next`) | The prepared content, a page by its path, page metadata, `Img` (the prepared widths), `Md` (Markdown that can't run HTML), `JsonLd`, `previewOrigins`. The content is a store: on the server it reads `.site/prepared.json`; in the preview, what CalOS sends. |
+| **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. |
 
 ## A build
 

package/dist/cli/check.d.ts

@@ -1,5 +1,4 @@
-export declare function check(dir: string, log?: {
-    (...data: any[]): void;
-    (...data: any[]): void;
-    (message?: any, ...optionalParams: any[]): void;
+export declare function check(dir: string, o?: {
+    allow?: string[];
+    log?: (line: string) => void;
 }): Promise<boolean>;

package/dist/cli/check.js

@@ -14,7 +14,9 @@ import { readFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { join } from "node:path";
 import { serve } from "./serve.js";
-export async function check(dir, log = console.log) {
+export async function check(dir, o = {}) {
+    const log = o.log ?? console.log;
+    const allow = new Set(o.allow ?? []);
     const require = createRequire(join(process.cwd(), "package.json"));
     const pw = (await import(__rewriteRelativeImportExtension(require.resolve("playwright"))));
     const chromium = pw.chromium ?? pw.default.chromium;
@@ -40,7 +42,8 @@ export async function check(dir, log = console.log) {
             let where = "";
             page.on("console", (m) => m.type() === "error" && problems.push(`${where} (${screen}): console: ${m.text()}`));
             page.on("pageerror", (e) => problems.push(`${where} (${screen}): script error: ${e.message}`));
-            page.on("requestfailed", (r) => problems.push(`${where} (${screen}): didn't load ${r.url()}`));
+            // A request the browser cancelled itself (a link prefetch dropped as the page moves on) isn't a failure.
+            page.on("requestfailed", (r) => r.failure()?.errorText !== "net::ERR_ABORTED" && problems.push(`${where} (${screen}): didn't load ${r.url()}`));
             page.on("response", (r) => {
                 if (r.status() >= 400 && !r.url().endsWith("/404.html"))
                     problems.push(`${where} (${screen}): ${r.status()} for ${r.url()}`);
@@ -53,7 +56,7 @@ export async function check(dir, log = console.log) {
                 const result = (await page.evaluate(() => 
                 // @ts-expect-error axe is defined on the page by the line above
                 window.axe.run(document, { runOnly: { type: "tag", values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"] } })));
-                for (const v of result.violations) {
+                for (const v of result.violations.filter((x) => !allow.has(x.id))) {
                     const targets = v.nodes.slice(0, 3).map((n) => n.target.join(" "));
                     problems.push(`${path} (${screen}): ${v.id}: ${v.help} [${v.impact}] at ${targets.join(", ")}${v.nodes.length > 3 ? ` and ${v.nodes.length - 3} more` : ""}`);
                 }
@@ -69,6 +72,6 @@ export async function check(dir, log = console.log) {
         log(`✗ ${dir}: ${problems.length} problem${problems.length === 1 ? "" : "s"}\n  - ${[...new Set(problems)].join("\n  - ")}`);
         return false;
     }
-    log(`✓ ${dir}: ${paths.length} pages, on a computer and a phone: no accessibility problems axe can find, nothing blocked or broken`);
+    log(`✓ ${dir}: ${paths.length} pages, on a computer and a phone: no accessibility problems axe can find${allow.size ? ` (except the ones allowed: ${[...allow].join(", ")})` : ""}, nothing blocked or broken`);
     return true;
 }

package/dist/cli/index.js

@@ -2,7 +2,7 @@
 // site-kit prepare            content checked, schema written, images ready for the build (.site/, public/)
 // site-kit finish [out]       after the build: the content security policy, _headers, _redirects
 // site-kit serve [out] [port] the build served as Cloudflare Pages will
-// site-kit check [out]        every page in a real browser: axe, blocked or broken loads
+// site-kit check [out] [--allow=rule,rule]  every page in a real browser: axe, blocked or broken loads
 import { resolve } from "node:path";
 import { finish } from "../finish.js";
 import { prepare } from "../prepare.js";
@@ -21,7 +21,9 @@ try {
     }
     else if (command === "check") {
         const { check } = await import("./check.js");
-        process.exitCode = (await check(resolve(args[0] ?? "out"))) ? 0 : 1;
+        const allow = args.filter((a) => a.startsWith("--allow=")).flatMap((a) => a.slice(8).split(","));
+        const dir = args.find((a) => !a.startsWith("--")) ?? "out";
+        process.exitCode = (await check(resolve(dir), { allow })) ? 0 : 1;
     }
     else {
         console.error("Usage: site-kit prepare | finish [out] | serve [out] [port] | check [out]");

package/dist/cli/serve.js

@@ -67,7 +67,17 @@ export function serve(dir, port) {
             res.writeHead(400);
             return res.end();
         }
-        if (existsSync(file) && statSync(file).isDirectory()) {
+        // Pages' clean URLs: /about is about.html when there is one (and /about/ goes to /about); a folder's
+        // index.html otherwise (and /about goes to /about/).
+        const bare = path.replace(/\/$/, "");
+        if (bare && !extname(bare) && existsSync(join(root, `${bare}.html`)) && !path.startsWith("/_")) {
+            if (path.endsWith("/")) {
+                res.writeHead(308, { Location: bare });
+                return res.end();
+            }
+            file = join(root, `${bare}.html`);
+        }
+        else if (existsSync(file) && statSync(file).isDirectory()) {
             if (!path.endsWith("/")) {
                 res.writeHead(308, { Location: `${path}/` });
                 return res.end();

package/dist/content/index.d.ts

@@ -1,6 +1,9 @@
 import { z } from "zod";
+export { checkStructure, describePath, type StructureIssue } from "../schema.ts";
 export { z };
 export declare const text: z.ZodString;
+/** Longer plain text: drawn as a text area. */
+export declare const longText: z.ZodString;
 /** Markdown: paragraphs, **bold**, *italic*, [links](/contact), lists, ### small headings. No HTML. */
 export declare const md: z.ZodString;
 /** A file in the site's `content/images/` folder. */
@@ -101,7 +104,8 @@ export type SiteBase = {
     lang: string;
     business: Business;
     form?: string;
-    redirects: Redirect[];
+    redirects: Redirect[]; /** Whether page paths end in a slash (the default). */
+    trailingSlash?: boolean;
 };
 /** The content as the kit sees it: what search, security, images and the checks need. A site's own type has its blocks and extra fields. */
 export type Site = SiteBase & {
@@ -116,12 +120,18 @@ export type BlocksOf<B extends Record<string, z.ZodObject>> = {
     };
 }[keyof B & string];
 /** A site's content with its own blocks typed: `ContentOf<typeof blocks> & { headerAction?: Link }`. */
-export type ContentOf<B extends Record<string, z.ZodObject>> = SiteBase & {
-    pages: (Omit<Page, "blocks"> & {
+export type ContentOf<B extends Record<string, z.ZodObject>, P extends object = {}> = SiteBase & {
+    pages: (Omit<Page, "blocks"> & P & {
         blocks: BlocksOf<B>[];
     })[];
 };
 export type DefineOptions = {
+    /** Whether page paths end in a slash: `/services/` (the default) or `/services`. Match the site's existing addresses. */
+    trailingSlash?: boolean;
+    /** Fields of a page beyond the kit's own (text for a share picture, a tag). */
+    pageExtend?: z.ZodRawShape;
+    /** Sources the content security policy should allow beyond the site's own, by directive: `{ "connect-src": ["https://analytics.example"] }`. */
+    csp?: Record<string, string[]>;
     /** Fields of the site beyond the kit's own (a theme, a header button, a form address). */
     extend?: z.ZodRawShape;
     /** Checks only the site can make (a contact block needs somewhere to send), added to the kit's own. */
@@ -271,12 +281,18 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                 to: z.ZodString;
                 status: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<301>, z.ZodLiteral<302>]>>;
             }, z.core.$strip>>>;
-        }, z.core.$strip>>;
+        }, z.core.$strip>> & {
+            trailingSlash: boolean;
+        };
+        warnings: string[];
         problems?: never;
     } | {
         site?: never;
+        warnings?: never;
         problems: string[];
     };
+    trailingSlash: boolean;
+    csp: Record<string, string[]>;
     /** The declaration CalOS draws its editing forms from. */
     jsonSchema: () => Record<string, unknown>;
 };

package/dist/content/index.js

@@ -9,19 +9,30 @@
 // Nothing here knows how a block looks. A custom design adds its own kinds of block and CalOS edits
 // them with no further work.
 import { z } from "zod";
+import { checkStructure, describePath } from "../schema.js";
+export { checkStructure, describePath } from "../schema.js";
 export { z };
+// Fields carry an "x-ui" hint in the JSON Schema, so CalOS draws the right control: a text area, a
+// Markdown box, a picture picker.
 export const text = z.string().trim().min(1);
+/** Longer plain text: drawn as a text area. */
+export const longText = text.meta({ "x-ui": "textarea" });
 /** Markdown: paragraphs, **bold**, *italic*, [links](/contact), lists, ### small headings. No HTML. */
-export const md = text;
+export const md = text.meta({ "x-ui": "markdown" });
 /** A file in the site's `content/images/` folder. */
-export const file = z.string().regex(/^[\w.\-/]+\.(jpe?g|png|webp|avif|svg)$/i, { error: "An image file in content/images, like team/anna.jpg" });
+export const file = z
+    .string()
+    .regex(/^[\w.\-/]+\.(jpe?g|png|webp|avif|svg)$/i, { error: "An image file in content/images, like team/anna.jpg" })
+    .meta({ "x-ui": "image-file", "x-error": "A picture file: choose or upload one" });
 /** Describe what's in the picture for someone who can't see it; "" only when it's decoration. */
-export const image = z.object({ src: file, alt: z.string() });
-export const href = z.string().regex(/^(\/[\w\-./#?=&%]*|#[\w-]+|https?:\/\/\S+|tel:\+?[\d\s()-]+|mailto:\S+@\S+)$/, {
-    error: "A link: a page on the site (/services), a part of a page (#contact), a full address (https://…), tel: or mailto:",
-});
+export const image = z.object({ src: file, alt: z.string() }).meta({ "x-ui": "image" });
+const HREF_HELP = "A link: a page on the site (/services), a part of a page (#contact), a full address (https://…), tel: or mailto:";
+export const href = z
+    .string()
+    .regex(/^(\/[\w\-./#?=&%]*|#[\w-]+|https?:\/\/\S+|tel:\+?[\d\s()-]+|mailto:\S+@\S+)$/, { error: HREF_HELP })
+    .meta({ "x-error": HREF_HELP });
 export const link = z.object({ label: text, href, style: z.enum(["primary", "secondary"]).optional() });
-export const time = z.string().regex(/^([01]\d|2[0-3]):[0-5]\d$/, { error: "A time like 08:00 or 17:30" });
+export const time = z.string().regex(/^([01]\d|2[0-3]):[0-5]\d$/, { error: "A time like 08:00 or 17:30" }).meta({ "x-error": "A time like 08:00 or 17:30" });
 export const DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 /** What every block has: a place on the page, for links like /#contact. */
 const blockBase = { id: z.string().regex(/^[a-z][\w-]*$/).optional() };
@@ -38,7 +49,7 @@ export const business = z.object({
     /** The schema.org kind: Plumber, Electrician, HVACBusiness, Dentist, HairSalon, Restaurant, LocalBusiness… */
     kind: z.string().regex(/^[A-Z]\w+$/).default("LocalBusiness"),
     tagline: text.optional(),
-    phone: z.string().regex(/^\+?[\d\s().-]{7,}$/, { error: "A phone number like (555) 010-2030" }).optional(),
+    phone: z.string().regex(/^\+?[\d\s().-]{7,}$/, { error: "A phone number like (555) 010-2030" }).meta({ "x-error": "A phone number like (555) 010-2030" }).optional(),
     email: z.email().optional(),
     address: address.optional(),
     /** Off for a business that goes to its customers and doesn't take visitors at its address. */
@@ -56,18 +67,20 @@ export const business = z.object({
         .partial()
         .default({}),
 });
-const pageBase = {
-    path: z.string().regex(/^\/([a-z0-9-]+\/)*$/, { error: "A path like / or /services/ or /areas/springfield/ (lowercase, ending in /)" }),
+const pageBase = (trailingSlash) => ({
+    path: trailingSlash
+        ? z.string().regex(/^\/([a-z0-9-]+\/)*$/, { error: "A path like / or /services/ or /areas/springfield/ (lowercase, ending in /)" }).meta({ "x-error": "A path like / or /services/ or /areas/springfield/ (lowercase, ending in /)" })
+        : z.string().regex(/^\/([a-z0-9-]+(\/[a-z0-9-]+)*)?$/, { error: "A path like / or /services or /areas/springfield (lowercase, no / at the end)" }).meta({ "x-error": "A path like / or /services or /areas/springfield (lowercase, no / at the end)" }),
     /** The page's title in search results and the browser tab. The business's name is added after it. */
-    title: text.max(60, { error: "Keep a title under 60 characters so search results show it whole" }),
+    title: text,
     /** What search results show under the title. */
-    description: text.max(160, { error: "Keep a description under 160 characters so search results show it whole" }),
+    description: text,
     /** Its label in the menu; leave out to keep it off the menu. */
     menu: text.optional(),
     /** The picture shown when the page is shared; defaults to the first image on it. */
     share: image.optional(),
     noindex: z.boolean().default(false),
-};
+});
 /**
  * A site's content shape from its blocks: each a name and the fields it has. The site's own block
  * type is `z.output<typeof content.schema>["pages"][number]["blocks"][number]`.
@@ -76,8 +89,15 @@ export function defineSite(blocks, o = {}) {
     const names = Object.keys(blocks);
     if (!names.length)
         throw new Error("A site needs at least one kind of block");
-    const union = z.discriminatedUnion("type", names.map((type) => z.object({ type: z.literal(type), ...blockBase }).extend(blocks[type].shape)));
-    const page = z.object({ ...pageBase, blocks: z.array(union).min(1) });
+    const union = z.discriminatedUnion("type", 
+    // Each kind keeps what the site said of it (its title, for CalOS to call it by).
+    names.map((type) => {
+        const kind = z.object({ type: z.literal(type), ...blockBase }).extend(blocks[type].shape);
+        const meta = blocks[type].meta();
+        return meta ? kind.meta(meta) : kind;
+    }));
+    const trailingSlash = o.trailingSlash ?? true;
+    const page = z.object({ ...pageBase(trailingSlash), ...o.pageExtend, blocks: z.array(union).min(1) });
     const schema = z
         .object({
         /** The address it's served at once live (its main domain). */
@@ -93,15 +113,8 @@ export function defineSite(blocks, o = {}) {
     })
         .superRefine((site, ctx) => {
         const s = site;
-        const paths = new Set();
-        s.pages.forEach((p, i) => {
-            if (paths.has(p.path))
-                ctx.addIssue({ code: "custom", path: ["pages", i, "path"], message: `Two pages at ${p.path}` });
-            paths.add(p.path);
-        });
-        if (!paths.has("/"))
-            ctx.addIssue({ code: "custom", path: ["pages"], message: "There's no home page: add a page with path /" });
-        checkLinks(s, ctx);
+        for (const i of checkStructure(s))
+            ctx.addIssue({ code: "custom", path: i.path, message: i.message });
         o.refine?.(s, ctx);
     });
     return {
@@ -109,54 +122,22 @@ export function defineSite(blocks, o = {}) {
         /** The content checked, or every problem in it as "where: what" lines. */
         parse(raw) {
             const r = schema.safeParse(raw);
-            return r.success ? { site: r.data } : { problems: r.error.issues.map((i) => `${where(raw, i.path)}: ${i.message}`) };
+            if (!r.success)
+                return { problems: r.error.issues.map((i) => `${describePath(raw, i.path)}: ${i.message}`) };
+            return { site: { ...r.data, trailingSlash }, warnings: lengthWarnings(r.data) };
         },
+        trailingSlash,
+        csp: o.csp ?? {},
         /** The declaration CalOS draws its editing forms from. */
         jsonSchema: () => z.toJSONSchema(schema, { io: "input", unrepresentable: "any" }),
     };
 }
-/** Every link to a page of the site must land on one, and every link to a part of a page must have that part. */
-function checkLinks(site, ctx) {
-    const ids = new Map(site.pages.map((p) => [p.path, new Set(p.blocks.map((b) => b.id).filter(Boolean))]));
-    const visit = (value, path, page) => {
-        if (Array.isArray(value))
-            value.forEach((v, i) => visit(v, [...path, i], page));
-        else if (value && typeof value === "object") {
-            for (const [k, v] of Object.entries(value)) {
-                if (k === "href" && typeof v === "string" && (v.startsWith("#") || v.startsWith("/"))) {
-                    const to = v.startsWith("#") && page ? page.path + v : v;
-                    const [p, hash] = to.split("#");
-                    const target = p.split("?")[0];
-                    if (!ids.has(target))
-                        ctx.addIssue({ code: "custom", path: [...path, k], message: `No page at ${target}` });
-                    else if (hash && !ids.get(target).has(hash))
-                        ctx.addIssue({ code: "custom", path: [...path, k], message: `${target} has no block with id "${hash}"` });
-                }
-                else
-                    visit(v, [...path, k], page);
-            }
-        }
-    };
-    site.pages.forEach((p, i) => visit(p.blocks, ["pages", i, "blocks"], p));
-    for (const [k, v] of Object.entries(site))
-        if (k !== "pages" && k !== "redirects")
-            visit(v, [k], null);
-}
-/** "pages[2] (/services/) › blocks[1] (services) › items[0].title", readable in a build log. */
-function where(raw, path) {
-    let at = raw;
-    const out = [];
-    for (const key of path) {
-        at = at && typeof at === "object" ? at[key] : undefined;
-        if (typeof key === "number") {
-            const o = at;
-            const label = o && typeof o === "object" ? (o.path ?? o.type ?? o.title ?? o.name ?? o.label) : undefined;
-            out[out.length - 1] = `${out[out.length - 1] ?? ""}[${key}]${typeof label === "string" ? ` (${label})` : ""}`;
-        }
-        else
-            out.push(String(key));
-    }
-    return out.join(" › ") || "site.json";
+/** Search results cut a title at about 60 characters and a description at about 160: said, not refused, since the page still works. */
+function lengthWarnings(site) {
+    return site.pages.flatMap((p, i) => [
+        ...(p.title.length > 60 ? [`pages[${i}] (${p.path}) › title: ${p.title.length} characters; search results show about 60`] : []),
+        ...(p.description.length > 160 ? [`pages[${i}] (${p.path}) › description: ${p.description.length} characters; search results show about 160`] : []),
+    ]);
 }
 /** "Mon–Fri", "Sat", "Mon, Wed, Fri" for a set of days. */
 export function dayRange(days) {

package/dist/finish.js

@@ -5,11 +5,12 @@
 import { createHash } from "node:crypto";
 import { readdir, readFile, writeFile } from "node:fs/promises";
 import { join, relative } from "node:path";
-import { headersFile, loadRedirects } from "./seo.js";
+import { headersFile, loadRedirects, PREVIEW_PATH } from "./seo.js";
 export async function finish(root, outDir, env = process.env, log = console.log) {
     const prepared = JSON.parse(await readFile(join(root, ".site", "prepared.json"), "utf8"));
     const site = prepared.site;
     const formOrigin = site.form ? new URL(site.form).origin : null;
+    const editors = prepared.editors ?? [];
     const pages = (await walk(outDir)).filter((f) => f.endsWith(".html"));
     const attributes = [];
     for (const file of pages) {
@@ -27,17 +28,24 @@ export async function finish(root, outDir, env = process.env, log = console.log)
         // A style attribute can't be allowed by hash without allowing every one: the template uses classes.
         if (/<[a-z][^>]*\sstyle\s*=/i.test(html))
             attributes.push(relative(outDir, file));
-        const policy = [
-            "default-src 'self'",
-            `script-src 'self'${[...scripts].map((h) => ` '${h}'`).join("")}`,
-            `style-src 'self'${[...styles].map((h) => ` '${h}'`).join("")}`,
-            "img-src 'self' data:",
-            "font-src 'self'",
-            "connect-src 'self'",
-            `form-action 'self'${formOrigin ? ` ${formOrigin}` : ""}`,
-            "base-uri 'self'",
-            "object-src 'none'",
-        ].join("; ");
+        const directives = {
+            "default-src": ["'self'"],
+            "script-src": ["'self'", ...[...scripts].map((h) => `'${h}'`)],
+            "style-src": ["'self'", ...[...styles].map((h) => `'${h}'`)],
+            "img-src": ["'self'", "data:"],
+            "font-src": ["'self'"],
+            // A form sends with fetch as often as by posting the page: its address for both.
+            "connect-src": ["'self'", ...(formOrigin ? [formOrigin] : [])],
+            "form-action": ["'self'", ...(formOrigin ? [formOrigin] : [])],
+            "base-uri": ["'self'"],
+            "object-src": ["'none'"],
+        };
+        for (const [directive, sources] of Object.entries(prepared.csp ?? {}))
+            directives[directive] = [...new Set([...(directives[directive] ?? ["'self'"]), ...sources])];
+        // The preview shows the draft's pictures from CalOS, before any build has made them.
+        if (relative(outDir, file).replace(/(\/index)?\.html$/, "") === PREVIEW_PATH.slice(1))
+            directives["img-src"].push(...editors);
+        const policy = Object.entries(directives).map(([d, v]) => `${d} ${v.join(" ")}`).join("; ");
         html = html.replace(/<meta http-equiv="content-security-policy"[^>]*>/i, "");
         html = html.replace(/<head([^>]*)>/i, `<head$1><meta http-equiv="content-security-policy" content="${policy}">`);
         await writeFile(file, html);
@@ -45,7 +53,7 @@ export async function finish(root, outDir, env = process.env, log = console.log)
     if (attributes.length) {
         throw new Error(`These pages have inline style attributes, which the content security policy blocks: ${attributes.join(", ")}. Use a class instead.`);
     }
-    await writeFile(join(outDir, "_headers"), headersFile());
+    await writeFile(join(outDir, "_headers"), headersFile(editors));
     const redirects = await loadRedirects(site, env.CALOS_REDIRECTS_URL);
     await writeFile(join(outDir, "_redirects"), redirects.file);
     log(`site-kit: a content security policy in ${pages.length} pages; _headers; _redirects from ${redirects.from}`);

package/dist/images.d.ts

@@ -1,5 +1,5 @@
 import type { Image, Page, Site } from "./content/index.ts";
-/** Every image the content names: the shape of a value with a `src` that's an image file. */
+/** Every image the content names. */
 export declare function imagesIn(value: unknown, found?: Set<string>): Set<string>;
 /** The picture a page shows when it's shared: its own, else its first, else the home page's first. */
 export declare function shareImageOf(site: Site, page: Page): Image | undefined;

package/dist/images.js

@@ -1,13 +1,17 @@
 // Which pictures a site's content names, and which one a page is shared with. Pure: no files, no
 // sharp, so a site's components can use it as well as the build step.
-/** Every image the content names: the shape of a value with a `src` that's an image file. */
+const IMAGE = /\.(jpe?g|png|webp|avif|svg)$/i;
+/** Every image the content names. */
 export function imagesIn(value, found = new Set()) {
     if (Array.isArray(value))
         value.forEach((v) => imagesIn(v, found));
     else if (value && typeof value === "object") {
         const o = value;
-        if (typeof o.src === "string" && "alt" in o && /\.(jpe?g|png|webp|avif|svg)$/i.test(o.src))
-            found.add(o.src);
+        // A picture has an `alt` and one or more files named `src` or ending in it (`src`, `phoneSrc`).
+        if ("alt" in o)
+            for (const [k, v] of Object.entries(o))
+                if (/src$/i.test(k) && typeof v === "string" && IMAGE.test(v))
+                    found.add(v);
         Object.values(o).forEach((v) => imagesIn(v, found));
     }
     return found;
@@ -28,7 +32,7 @@ function findImage(value, src) {
     }
     else if (value && typeof value === "object") {
         const o = value;
-        if (o.src === src && typeof o.alt === "string")
+        if (typeof o.alt === "string" && Object.entries(o).some(([k, v]) => /src$/i.test(k) && v === src))
             return { src, alt: o.alt };
         for (const v of Object.values(o)) {
             const f = findImage(v, src);

package/dist/next/data-fs.d.ts

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

package/dist/next/data-fs.js

@@ -0,0 +1,13 @@
+// On the server: the store reads what `site-kit prepare` wrote. Loaded by the server entry
+// (index.server.ts) only, so nothing that runs in a browser imports the file system.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { loadPreparedWith } from "./data.js";
+loadPreparedWith(() => {
+    try {
+        return JSON.parse(readFileSync(join(process.cwd(), ".site", "prepared.json"), "utf8"));
+    }
+    catch {
+        throw new Error("The site isn't prepared: run `site-kit prepare` before the build (the dev and build scripts do)");
+    }
+});

package/dist/next/data.d.ts

@@ -1,5 +1,9 @@
 import type { Page } from "../content/index.ts";
 import type { Prepared, PreparedImage } from "../prepare.ts";
+/** Where the server reads the prepared content from (./data-fs.ts). */
+export declare function loadPreparedWith(load: () => Prepared): void;
+/** Puts content in the store: CalOS's preview, with the draft it's editing. */
+export declare function setPrepared(p: Prepared): void;
 export declare function prepared(): Prepared;
 export declare const site: () => import("../content/index.ts").Site;
 export declare function image(src: string): PreparedImage;

package/dist/next/data.js

@@ -1,17 +1,23 @@
-// What `site-kit prepare` made ready, read once per build from `.site/prepared.json`.
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-let cached = null;
+// The site's prepared content as components read it: a store, filled on the server from
+// `.site/prepared.json` (./data-fs.ts, which the server entry loads) and in CalOS's preview by the
+// draft CalOS sends (./preview.tsx). Components read it the same way in both, so one set of
+// components draws the published site and the draft being edited.
+let current = null;
+let loader = null;
+/** Where the server reads the prepared content from (./data-fs.ts). */
+export function loadPreparedWith(load) {
+    loader = load;
+}
+/** Puts content in the store: CalOS's preview, with the draft it's editing. */
+export function setPrepared(p) {
+    current = p;
+}
 export function prepared() {
-    if (!cached || process.env.NODE_ENV === "development") {
-        try {
-            cached = JSON.parse(readFileSync(join(process.cwd(), ".site", "prepared.json"), "utf8"));
-        }
-        catch {
-            throw new Error("The site isn't prepared: run `site-kit prepare` before the build (the dev and build scripts do)");
-        }
-    }
-    return cached;
+    if (loader && (!current || process.env.NODE_ENV === "development"))
+        current = loader();
+    if (!current)
+        throw new Error("The site's content isn't loaded: on the server, run `site-kit prepare` first; in the preview, it comes from CalOS");
+    return current;
 }
 export const site = () => prepared().site;
 export function image(src) {
@@ -22,6 +28,6 @@ export function image(src) {
 }
 /** The page at a catch-all route's segments (`[[...path]]`), or null. */
 export function pageAt(path) {
-    const at = path?.length ? `/${path.join("/")}/` : "/";
+    const at = path?.length ? `/${path.join("/")}${site().trailingSlash === false ? "" : "/"}` : "/";
     return site().pages.find((p) => p.path === at) ?? null;
 }

package/dist/next/index.server.d.ts

@@ -0,0 +1,4 @@
+import "./data-fs.ts";
+export * from "./index.ts";
+/** The CalOS addresses that may draw drafts in this site's preview (from the content's source); none for content from the repository. */
+export declare function previewOrigins(): string[];

package/dist/next/index.server.js

@@ -0,0 +1,9 @@
+// The kit's Next.js entry on the server (the "react-server" and "node" conditions): the same as
+// ./index.ts, with the store reading `.site/prepared.json`.
+import "./data-fs.js";
+import { prepared } from "./data.js";
+export * from "./index.js";
+/** The CalOS addresses that may draw drafts in this site's preview (from the content's source); none for content from the repository. */
+export function previewOrigins() {
+    return prepared().editors ?? [];
+}

package/dist/next/preview.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+import type { Page, Site } from "../content/index.ts";
+export declare function SitePreview({ origins, render }: {
+    origins: string[];
+    render: (page: Page, site: Site) => ReactNode;
+}): import("react").JSX.Element | null;