@caltho/site-kit 0.2.10 → 0.3.0

package/dist/behaviors/tabs.js

@@ -0,0 +1,55 @@
+// Tabs: the node's first child holds the tabs (one child for each panel), the children after it are
+// the panels, in the same order. A tab list, tabs and panels as a screen reader expects them (roles,
+// selected, controls), the arrow keys, Home and End moving between tabs. Without scripting every
+// panel shows, one after another, and the tabs don't (sections.css).
+//
+// Self-contained: sent to visitors as its own script (./index.ts). The kit marks the list
+// (data-kit-tablist) and the panels (data-kit-panel) (../next/built.tsx).
+export function tabs(el, s) {
+    const list = el.querySelector(":scope > [data-kit-tablist]");
+    const panels = Array.from(el.querySelectorAll(":scope > [data-kit-panel]"));
+    if (!list || !panels.length)
+        return;
+    const tabs = Array.from(list.children).slice(0, panels.length);
+    const key = Math.random().toString(36).slice(2, 8);
+    list.setAttribute("role", "tablist");
+    tabs.forEach((t, i) => {
+        t.id ||= `kit-tab-${key}-${i}`;
+        panels[i].id ||= `kit-panel-${key}-${i}`;
+        t.setAttribute("role", "tab");
+        t.setAttribute("aria-controls", panels[i].id);
+        panels[i].setAttribute("role", "tabpanel");
+        panels[i].setAttribute("aria-labelledby", t.id);
+        panels[i].tabIndex = 0;
+        t.addEventListener("click", (e) => {
+            e.preventDefault();
+            pick(i, false);
+        });
+        t.addEventListener("keydown", (e) => {
+            const to = e.key === "ArrowRight" || e.key === "ArrowDown" ? i + 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? i - 1 : e.key === "Home" ? 0 : e.key === "End" ? tabs.length - 1 : e.key === "Enter" || e.key === " " ? i : null;
+            if (to === null)
+                return;
+            e.preventDefault();
+            pick((to + tabs.length) % tabs.length, true);
+        });
+    });
+    function pick(i, focus) {
+        tabs.forEach((t, j) => {
+            const on = j === i;
+            t.setAttribute("aria-selected", String(on));
+            t.tabIndex = on ? 0 : -1;
+            t.toggleAttribute("data-active", on);
+            panels[j].hidden = !on;
+        });
+        if (focus)
+            tabs[i].focus();
+    }
+    // CalOS's preview asks for the panel holding what's selected to be shown.
+    el.addEventListener("kit:show", (e) => {
+        const i = panels.findIndex((p) => p.contains(e.target));
+        if (i >= 0)
+            pick(i, false);
+    });
+    pick(Math.min(s.first ?? 0, tabs.length - 1), false);
+    el.setAttribute("data-kit-ready", "");
+}

package/dist/built/css.d.ts

@@ -0,0 +1,2 @@
+/** The CSS for these classes (prefixed, as drawn), with the site's own colours (their slugs) as Tailwind colours. Empty for none. */
+export declare function builtCss(classes: Iterable<string>, swatches?: string[]): Promise<string>;

package/dist/built/css.js

@@ -0,0 +1,26 @@
+// Built sections' CSS at build: Tailwind v4's own compiler, given exactly the classes the prepared
+// content's trees use (./tree.ts), so the CSS holds those and nothing else; the theme from the Look
+// and no reset (./theme.ts). Node only: prepare runs it.
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import { compile } from "tailwindcss";
+import { tailwindInput } from "./theme.js";
+const require = createRequire(import.meta.url);
+/** Tailwind's own stylesheets (`tailwindcss/theme.css`, `tailwindcss/utilities.css`), from its package. */
+async function loadStylesheet(id, base) {
+    const name = id.startsWith("tailwindcss") ? id : `tailwindcss/${id.replace(/^\.\//, "")}`;
+    if (!/^tailwindcss\/(theme|utilities)(\.css)?$/.test(name))
+        throw new Error(`Built sections' CSS imports only Tailwind's theme and utilities, not ${id}`);
+    const path = require.resolve(name.endsWith(".css") ? name : `${name}.css`);
+    return { path, base: dirname(path) || base, content: await readFile(path, "utf8") };
+}
+/** The CSS for these classes (prefixed, as drawn), with the site's own colours (their slugs) as Tailwind colours. Empty for none. */
+export async function builtCss(classes, swatches = []) {
+    const list = [...classes];
+    if (!list.length)
+        return "";
+    const compiler = await compile(tailwindInput(swatches), { base: process.cwd(), loadStylesheet });
+    // Tailwind's banner comment names its version; the file's name carries its hash, so it's dropped.
+    return compiler.build(list).replace(/^\/\*![^*]*\*\/\n?/, "");
+}

package/dist/built/theme.d.ts

@@ -0,0 +1,19 @@
+/** What every built section's class carries on the page (the tree keeps it without). */
+export declare const PREFIX = "kit";
+/** A class of a tree as it's drawn: `md:p-4` → `kit:md:p-4`. */
+export declare const prefixed: (token: string) => string;
+/** The Look's colours by role, as Tailwind colours (`bg-brand`, `text-on-brand`, `border-line`), with what they fall back to on a site without a Look. */
+export declare const THEME_COLOURS: Record<string, string>;
+/** The Look's fonts: `font-display` and `font-heading` its headings', `font-body` and `font-text` its text's. */
+export declare const THEME_FONTS: Record<string, string>;
+/** The Look's type scale as text sizes (`text-h1`, `text-body`), each with its line height, tracking and weight. */
+export declare const THEME_TYPE: readonly ["display", "h1", "h2", "h3", "body", "small"];
+/** Its corners, width and spacing: `rounded-card`, `rounded-button`, `max-w-content`, `px-gutter`, `py-section`. */
+export declare const THEME_OTHER: Record<string, string>;
+/**
+ * The site's own colours' slugs, from the Look's values (lookVars: `--look-swatch-dark-sand`), each
+ * one a Tailwind colour by its slug (`bg-dark-sand`).
+ */
+export declare function swatchSlugs(look: Record<string, string> | undefined): string[];
+/** The Tailwind input for built sections: the theme and utilities only, prefixed, and the site's Look as tokens. */
+export declare function tailwindInput(swatches?: string[]): string;

package/dist/built/theme.js

@@ -0,0 +1,86 @@
+// How a built section's Tailwind classes reach a page, on any site, whatever its own CSS
+// (cal-os docs/design/site-builder.md, "Tailwind"). Pure: the build (./css.ts) and the preview
+// (../next/preview.tsx, with Tailwind's browser build) compile the same input, so what's typed in
+// CalOS's preview is what's published.
+//
+// - Prefixed: a tree's `p-4` is drawn as `kit:p-4`, so only elements the kit drew from a tree ever
+//   carry one of these classes. A site's own markup with a class called `flex` or `hidden` (its own
+//   CSS's) is never restyled by them, and the kit's never by its.
+// - No preflight (Tailwind's reset): the rest of the site looks as it did.
+// - Not in a cascade layer: a site's own plain CSS (unlayered) would otherwise beat every utility,
+//   whatever its specificity.
+// - The site's Look as the theme: `bg-brand`, `text-ink`, `font-display`, `rounded-card`, read from
+//   the Look's CSS variables (--look-*, content/look.ts), so a change of Look in CalOS reaches built
+//   sections with nothing compiled again.
+import { KIT_TYPE, TYPE_ROLES } from "../content/look.js";
+/** What every built section's class carries on the page (the tree keeps it without). */
+export const PREFIX = "kit";
+/** A class of a tree as it's drawn: `md:p-4` → `kit:md:p-4`. */
+export const prefixed = (token) => `${PREFIX}:${token}`;
+/** The Look's colours by role, as Tailwind colours (`bg-brand`, `text-on-brand`, `border-line`), with what they fall back to on a site without a Look. */
+export const THEME_COLOURS = {
+    brand: "var(--look-brand, #111)",
+    "on-brand": "var(--look-on-brand, #fff)",
+    accent: "var(--look-accent, currentColor)",
+    "on-accent": "var(--look-on-accent, #111)",
+    page: "var(--look-page, #fff)",
+    ink: "var(--look-ink, #111)",
+    muted: "var(--look-muted, #666)",
+    line: "var(--look-line, #ddd)",
+    soft: "var(--look-soft, #f3f3f3)",
+    light: "var(--look-light, #fff)",
+    dark: "var(--look-dark, #111)",
+};
+/** The Look's fonts: `font-display` and `font-heading` its headings', `font-body` and `font-text` its text's. */
+export const THEME_FONTS = {
+    display: "var(--look-heading-font, inherit)",
+    heading: "var(--look-heading-font, inherit)",
+    body: "var(--look-body-font, inherit)",
+    text: "var(--look-body-font, inherit)",
+};
+/** The Look's type scale as text sizes (`text-h1`, `text-body`), each with its line height, tracking and weight. */
+export const THEME_TYPE = TYPE_ROLES;
+/** Its corners, width and spacing: `rounded-card`, `rounded-button`, `max-w-content`, `px-gutter`, `py-section`. */
+export const THEME_OTHER = {
+    "--radius-card": "var(--look-radius, 8px)",
+    "--radius-button": "var(--look-button-radius, 6px)",
+    "--container-content": "var(--look-width, 1200px)",
+    "--spacing-gutter": "var(--look-gutter, 20px)",
+    "--spacing-section": "var(--look-section-pad, clamp(56px, 8vw, 96px))",
+};
+/** Names a site's own colour can't take as a Tailwind colour: they're Tailwind's own words, or the roles. */
+const RESERVED = new Set(["inherit", "current", "transparent", ...Object.keys(THEME_COLOURS)]);
+/**
+ * The site's own colours' slugs, from the Look's values (lookVars: `--look-swatch-dark-sand`), each
+ * one a Tailwind colour by its slug (`bg-dark-sand`).
+ */
+export function swatchSlugs(look) {
+    return Object.keys(look ?? {})
+        .map((k) => /^--look-swatch-([a-z][a-z0-9-]*)$/.exec(k)?.[1])
+        .filter((s) => !!s && !RESERVED.has(s));
+}
+/** The Tailwind input for built sections: the theme and utilities only, prefixed, and the site's Look as tokens. */
+export function tailwindInput(swatches = []) {
+    const colours = [...Object.entries(THEME_COLOURS).map(([k, v]) => `  --color-${k}: ${v};`), ...swatches.map((s) => `  --color-${s}: var(--look-swatch-${s});`)];
+    const fonts = Object.entries(THEME_FONTS).map(([k, v]) => `  --font-${k}: ${v};`);
+    const type = THEME_TYPE.flatMap((r) => [
+        `  --text-${r}: var(--look-type-${r}-size, ${KIT_TYPE[r].size}px);`,
+        `  --text-${r}--line-height: var(--look-type-${r}-leading, ${KIT_TYPE[r].leading});`,
+        `  --text-${r}--letter-spacing: var(--look-type-${r}-tracking, ${KIT_TYPE[r].tracking}em);`,
+        `  --text-${r}--font-weight: var(--look-type-${r}-weight, ${KIT_TYPE[r].weight});`,
+    ]);
+    const other = Object.entries(THEME_OTHER).map(([k, v]) => `  ${k}: ${v};`);
+    return [
+        `@import "tailwindcss/theme.css" prefix(${PREFIX});`,
+        `@import "tailwindcss/utilities.css";`,
+        // A link to the page it's on (the kit marks it: next/built.tsx): aria-current:underline. Tailwind has no such variant of its own.
+        `@custom-variant aria-current (&[aria-current="page"]);`,
+        // inline: a utility reads the Look's variable itself, so nothing new is set on :root.
+        `@theme inline {`,
+        ...colours,
+        ...fonts,
+        ...type,
+        ...other,
+        `}`,
+    ].join("\n");
+}

package/dist/built/tree.d.ts

@@ -0,0 +1,24 @@
+import { type BehaviorName, type Node } from "../tree/index.ts";
+/** A node's classes as drawn: only the allowed ones (a bad one dropped, never drawn), and its behavior's, each prefixed. */
+export declare function nodeClasses(n: Node): string[];
+/** A block's or component's tree, wherever the content keeps one: built sections, saved sections, the site's components. */
+export declare function treesIn(site: {
+    pages?: {
+        blocks?: unknown[];
+    }[];
+    saved?: unknown;
+    components?: unknown;
+}): Generator<Node>;
+/** Every class the site's built sections are drawn with (prefixed): all the build compiles. Hidden nodes too, so showing one again needs no build. */
+export declare function classesIn(site: Parameters<typeof treesIn>[0]): Set<string>;
+/** The behaviors the site's built sections use, whose scripts the build makes. */
+export declare function behaviorsIn(site: Parameters<typeof treesIn>[0]): Set<BehaviorName>;
+/** Whether a page has any built section on it (a `built` or `use` block). */
+export declare const hasBuilt: (blocks: readonly {
+    type?: unknown;
+}[]) => boolean;
+/**
+ * The value at a dotted path: "company.email" in the site's content, "item.name" in the item a
+ * `repeat` is drawing. Only the content's own fields are read, never anything an object inherits.
+ */
+export declare function readPath(path: string, site: unknown, item?: unknown, self?: unknown): unknown;

package/dist/built/tree.js

@@ -0,0 +1,96 @@
+// What drawing a built section needs to know of its tree beyond each node: the classes it's drawn
+// with (its own, checked, and those its behavior adds), what a `bind` or `repeat` reads from the
+// site's content, and every class and behavior a site's built sections use (for the build to
+// compile only those classes and send only those scripts). Pure, for the server, the preview and the
+// build alike.
+import { safeClasses } from "../tree/index.js";
+import { prefixed } from "./theme.js";
+/** A node's classes as drawn: only the allowed ones (a bad one dropped, never drawn), and its behavior's, each prefixed. */
+export function nodeClasses(n) {
+    const own = safeClasses(n.class).split(" ").filter(Boolean);
+    // Sticky is CSS alone: no script for it.
+    const extra = n.behavior?.name === "sticky" ? ["sticky", `top-[${n.behavior.top ?? 0}px]`] : [];
+    return [...own, ...extra].map(prefixed);
+}
+/** A block's or component's tree, wherever the content keeps one: built sections, saved sections, the site's components. */
+export function* treesIn(site) {
+    const fromBlock = (b) => {
+        const o = b;
+        return o && o.type === "built" && o.root && typeof o.root === "object" ? o.root : null;
+    };
+    for (const p of site.pages ?? [])
+        for (const b of p.blocks ?? []) {
+            const r = fromBlock(b);
+            if (r)
+                yield r;
+        }
+    if (Array.isArray(site.saved))
+        for (const s of site.saved) {
+            const r = fromBlock(s?.block);
+            if (r)
+                yield r;
+        }
+    if (Array.isArray(site.components))
+        for (const c of site.components)
+            if (c?.root && typeof c.root === "object")
+                yield c.root;
+    // A header or footer built as a tree (the site's own, in place of the kit's).
+    for (const k of ["ownHeader", "ownFooter"]) {
+        const o = site[k];
+        if (o?.root && typeof o.root === "object")
+            yield o.root;
+    }
+    // A list's page design: drawn for each of its items.
+    const lists = site.lists;
+    if (lists && typeof lists === "object")
+        for (const l of Object.values(lists))
+            for (const b of l?.page?.blocks ?? []) {
+                const r = fromBlock(b);
+                if (r)
+                    yield r;
+            }
+}
+function* nodes(root) {
+    yield root;
+    for (const c of root.children ?? [])
+        yield* nodes(c);
+}
+/** Every class the site's built sections are drawn with (prefixed): all the build compiles. Hidden nodes too, so showing one again needs no build. */
+export function classesIn(site) {
+    const out = new Set();
+    for (const root of treesIn(site))
+        for (const n of nodes(root))
+            for (const c of nodeClasses(n))
+                out.add(c);
+    return out;
+}
+/** The behaviors the site's built sections use, whose scripts the build makes. */
+export function behaviorsIn(site) {
+    const out = new Set();
+    for (const root of treesIn(site))
+        for (const n of nodes(root))
+            if (n.behavior && !n.hidden)
+                out.add(n.behavior.name);
+    return out;
+}
+/** Whether a page has any built section on it (a `built` or `use` block). */
+export const hasBuilt = (blocks) => blocks.some((b) => b?.type === "built" || b?.type === "use");
+/**
+ * The value at a dotted path: "company.email" in the site's content, "item.name" in the item a
+ * `repeat` is drawing. Only the content's own fields are read, never anything an object inherits.
+ */
+export function readPath(path, site, item, self) {
+    const parts = path.split(".");
+    let at = site;
+    // item.: the item a repeat is drawing; this.: the item an item page is drawn for (a list's page).
+    if (parts[0] === "item" || parts[0] === "this") {
+        at = parts[0] === "item" ? item : self;
+        parts.shift();
+    }
+    for (const k of parts) {
+        if (at === null || typeof at !== "object" || !Object.prototype.hasOwnProperty.call(at, k))
+            return undefined;
+        at = at[k];
+    }
+    return at;
+}

package/dist/built.test.d.ts

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

package/dist/built.test.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "bun:test";
+import { existsSync } from "node:fs";
+import { mkdir, mkdtemp, readFile, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import { renderToStaticMarkup } from "react-dom/server";
+import { behaviorScript, BEHAVIOR_RUNS } from "./behaviors/index.js";
+import { builtCss } from "./built/css.js";
+import { swatchSlugs, tailwindInput } from "./built/theme.js";
+import { behaviorsIn, classesIn, nodeClasses, readPath } from "./built/tree.js";
+import { defineSite } from "./content/index.js";
+import { finish } from "./finish.js";
+import { setPrepared } from "./next/data.js";
+import { KitSection } from "./next/sections.js";
+import { prepare } from "./prepare.js";
+import { isShown, withoutVariant } from "./preview-match.js";
+import { isKitSection, sections } from "./sections/index.js";
+// Built sections: a tree of elements styled with Tailwind, drawn by the kit on any site, with the CSS
+// for exactly its classes and the scripts of exactly its behaviors.
+const content = {
+    url: "https://acme.example",
+    business: { name: "Acme" },
+    company: { email: "hello@acme.example", phone: "555 0100" },
+    caseStudies: [
+        { name: "Maple & Oak", summary: "Tax season, **calm**.", photo: { src: "a.jpg", alt: "The office" } },
+        { name: "Harbor Dental", summary: "Booked out.", photo: { src: "b.jpg", alt: "The chair" } },
+    ],
+};
+const images = {
+    "a.jpg": { width: 1600, height: 1000, src: "/_img/a.1600.webp", srcset: [{ url: "/_img/a.640.webp", w: 640 }, { url: "/_img/a.1600.webp", w: 1600 }] },
+    "b.jpg": { width: 800, height: 600, src: "/_img/b.800.webp", srcset: [] },
+};
+/** Draws a block as the published site does (draft: as CalOS's preview does). */
+function draw(block, o = {}) {
+    setPrepared({ site: { ...content, lang: "en", redirects: [], pages: [], ...o.site }, images, csp: {}, ...(o.built ? { built: o.built } : {}) }, o.draft ?? false);
+    return renderToStaticMarkup(_jsx(KitSection, { s: block }));
+}
+const tree = (root) => ({ type: "built", id: "hero", root });
+describe("a built section's tree, drawn", () => {
+    it("draws each node as its tag with its classes prefixed, a class that isn't allowed dropped", () => {
+        const html = draw(tree({ id: "root000001", tag: "section", class: "grid md:grid-cols-2 gap-6 bg-[url(https://evil.example/x.png)]", children: [{ id: "head000001", tag: "h1", class: "font-display text-h1 text-ink", text: "One place to run the **business**." }] }));
+        expect(html).toContain('<section class="kit:grid kit:md:grid-cols-2 kit:gap-6" id="hero" data-kit-built="">');
+        expect(html).toContain('<h1 class="kit:font-display kit:text-h1 kit:text-ink">One place to run the <strong>business</strong>.</h1>');
+        expect(html).not.toContain("evil");
+    });
+    it("leaves out a tag that isn't allowed, hidden nodes, and HTML in words; marks nodes only in the preview", () => {
+        const root = { id: "root000002", tag: "div", children: [{ id: "bad0000001", tag: "script", text: "alert(1)" }, { id: "hid0000001", tag: "p", text: "Draft", hidden: true }, { id: "txt0000001", tag: "p", text: "<img src=x onerror=alert(1)> hi" }] };
+        const html = draw(tree(root));
+        expect(html).not.toContain("<script");
+        expect(html).not.toContain("Draft");
+        expect(html).not.toContain("<img");
+        expect(html).toContain("&lt;img src=x onerror=alert(1)&gt; hi");
+        expect(html).not.toContain("data-node");
+        expect(draw(tree(root), { draft: true })).toContain('data-node="txt0000001"');
+    });
+    it("checks links again, opens outside ones in a new tab safely, and labels what has no words", () => {
+        const html = draw(tree({
+            id: "root000003",
+            tag: "nav",
+            children: [
+                { id: "lnk0000001", tag: "a", text: "Work", href: "/work/" },
+                { id: "lnk0000002", tag: "a", text: "Them", href: "https://them.example", external: true },
+                { id: "lnk0000003", tag: "a", text: "Bad", href: "javascript:alert(1)" },
+                { id: "btn0000001", tag: "button", label: "Next", children: [{ id: "ico0000001", tag: "icon", icon: "arrow-right" }] },
+                { id: "btn0000002", tag: "button", text: "Call", href: "tel:+15550100" },
+            ],
+        }));
+        expect(html).toContain('<a href="/work/">Work</a>');
+        expect(html).toContain('<a href="https://them.example" target="_blank" rel="noopener noreferrer">Them</a>');
+        expect(html).toContain("<a>Bad</a>");
+        expect(html).not.toContain("javascript:");
+        expect(html).toContain('<button aria-label="Next" type="button"><svg class="kit-built-icon" viewBox="0 0 24 24"');
+        expect(html).toContain('<a href="tel:+15550100">Call</a>');
+    });
+    it("draws a picture through the kit's images and a video as the kit's own player", () => {
+        const html = draw(tree({ id: "root000004", tag: "figure", children: [{ id: "pic0000001", tag: "img", class: "rounded-card", image: { src: "a.jpg", alt: "The office" } }, { id: "vid0000001", tag: "video", label: "Our story", video: { provider: "youtube", id: "dQw4w9WgXcQ" } }, { id: "vid0000002", tag: "video", video: { provider: "vimeo", id: "123456789" } }] }));
+        expect(html).toContain('srcSet="/_img/a.640.webp 640w, /_img/a.1600.webp 1600w"');
+        expect(html).toContain('alt="The office"');
+        expect(html).toContain('class="kit:rounded-card"');
+        expect(html).toContain('src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" title="Our story"');
+        expect(html).toContain('src="https://player.vimeo.com/video/123456789?dnt=1"');
+    });
+    it("shows shared values (bind) and one copy for each item of a list (repeat)", () => {
+        const html = draw(tree({
+            id: "root000005",
+            tag: "section",
+            children: [
+                { id: "mail000001", tag: "a", bind: { path: "company.email" }, href: "mailto:hello@acme.example" },
+                { id: "card000001", tag: "article", repeat: { path: "caseStudies" }, children: [{ id: "name000001", tag: "h3", bind: { path: "item.name" } }, { id: "sum0000001", tag: "p", bind: { path: "item.summary" } }, { id: "pic0000002", tag: "img", bind: { path: "item.photo" } }] },
+                { id: "card000002", tag: "p", repeat: { path: "caseStudies", limit: 1 }, bind: { path: "item.name" } },
+                { id: "none000001", tag: "p", bind: { path: "company.__proto__" }, text: "Kept" },
+            ],
+        }));
+        expect(html).toContain('<a href="mailto:hello@acme.example">hello@acme.example</a>');
+        expect(html).toContain("<h3>Maple &amp; Oak</h3>");
+        expect(html).toContain("<h3>Harbor Dental</h3>");
+        expect(html).toContain("Tax season, <strong>calm</strong>.");
+        expect(html).toContain('alt="The chair"');
+        expect(html.match(/<p>Maple &amp; Oak<\/p>/g)).toHaveLength(1);
+        expect(html).not.toContain("<p>Harbor Dental</p>");
+        expect(html).toContain("<p>Kept</p>");
+        expect(readPath("item.name", content, { name: "x" })).toBe("x");
+        expect(readPath("company.toString", content)).toBeUndefined();
+    });
+    it("draws a component used by name with its slots filled, and nothing for one the site hasn't", () => {
+        const components = [{ key: "case-card", name: "Case card", root: { id: "comp000001", tag: "article", class: "p-6 rounded-card", children: [{ id: "tit0000001", tag: "h3", slot: "title", text: "Title" }, { id: "go00000001", tag: "a", slot: "link", text: "View project", href: "/" }] } }];
+        const html = draw({ type: "use", id: "case", component: "case-card", slots: { title: { text: "Maple & Oak" }, link: { href: "/work/maple/" } } }, { site: { components } });
+        expect(html).toContain('<article class="kit:p-6 kit:rounded-card" id="case" data-kit-built=""><h3>Maple &amp; Oak</h3><a href="/work/maple/">View project</a></article>');
+        expect(draw({ type: "use", component: "nope", slots: {} }, { site: { components } })).toBe("");
+        expect(draw({ type: "use", component: "nope", slots: {} }, { site: { components }, draft: true })).toContain("kit-built-missing");
+    });
+    it("links the built sections' CSS and the scripts of the behaviors it uses, on the published page only", () => {
+        const built = { css: "/_kit/built.abc.css", scripts: { carousel: "/_kit/carousel.def.js", tabs: "/_kit/tabs.ghi.js" } };
+        const block = tree({ id: "root000006", tag: "div", behavior: { name: "carousel", transition: "fade", pauseOnHover: true, dots: true, arrows: false }, children: [{ id: "s000000001", tag: "p", text: "One" }, { id: "s000000002", tag: "p", text: "Two" }] });
+        const html = draw(block, { built });
+        expect(html).toContain('href="/_kit/built.abc.css"');
+        expect(html).toContain('src="/_kit/carousel.def.js"');
+        expect(html).not.toContain("tabs.ghi.js");
+        const preview = draw(block, { built, draft: true });
+        expect(preview).not.toContain("/_kit/");
+    });
+});
+describe("behaviors, drawn", () => {
+    it("a carousel: the first slide shown, the rest hidden until its script starts, dots as labelled buttons, and a stop button where it moves by itself", () => {
+        const html = draw(tree({ id: "root000007", tag: "div", class: "relative", label: "Case studies", behavior: { name: "carousel", seconds: 6, transition: "fade", pauseOnHover: true, dots: true, arrows: true }, children: [{ id: "s000000003", tag: "article", text: "One" }, { id: "s000000004", tag: "article", text: "Two" }] }));
+        expect(html).toContain('data-kit-behavior="carousel" data-kit-settings="{&quot;seconds&quot;:6,&quot;transition&quot;:&quot;fade&quot;,&quot;pauseOnHover&quot;:true,&quot;dots&quot;:true,&quot;arrows&quot;:true}" role="region" aria-roledescription="carousel"');
+        expect(html).toContain('<div class="kit-carousel-track" data-kit-track="" data-kit-transition="fade"><article data-kit-slide="" data-active="" role="group" aria-roledescription="slide" aria-label="1 of 2">One</article><article data-kit-slide="" role="group" aria-roledescription="slide" aria-label="2 of 2">Two</article></div>');
+        expect(html).toContain('data-kit-to="0" aria-label="Show slide 1 of 2" aria-current="true"');
+        expect(html).toContain('data-kit-pause="" aria-pressed="false" aria-label="Pause the slides"');
+        expect(html).toContain('data-kit-prev="" aria-label="Previous slide"');
+    });
+    it("a carousel's own designed controls are used in place of the kit's", () => {
+        const html = draw(tree({ id: "root000008", tag: "div", behavior: { name: "carousel", transition: "slide", pauseOnHover: true, dots: true, arrows: false }, children: [{ id: "s000000005", tag: "p", text: "One" }, { id: "s000000006", tag: "p", text: "Two" }, { id: "nxt0000001", tag: "button", slot: "next", children: [{ id: "ico0000002", tag: "icon", icon: "arrow-right" }] }, { id: "dts0000001", tag: "div", slot: "dots", class: "flex gap-2" }] }));
+        expect(html).toContain('<button data-kit-next="" aria-label="Next slide" type="button">');
+        expect(html).toContain('<div class="kit:flex kit:gap-2"><button type="button" class="kit-carousel-dot" data-kit-to="0"');
+        expect(html).not.toContain("kit-carousel-controls");
+    });
+    it("tabs, accordion, marquee, reveal and sticky mark what their scripts and CSS work on", () => {
+        const tabs = draw(tree({ id: "root000009", tag: "div", behavior: { name: "tabs", first: 0 }, children: [{ id: "lst0000001", tag: "div", children: [{ id: "tab0000001", tag: "button", text: "Returns" }, { id: "tab0000002", tag: "button", text: "Payroll" }] }, { id: "pan0000001", tag: "div", text: "We file them." }, { id: "pan0000002", tag: "div", text: "We run it." }] }));
+        expect(tabs).toContain('<div data-kit-tablist=""><button type="button">Returns</button>');
+        expect(tabs).toContain('<div data-kit-panel="">We file them.</div>');
+        const acc = draw(tree({ id: "root000010", tag: "div", behavior: { name: "accordion", single: true }, children: [{ id: "itm0000001", tag: "div", children: [{ id: "q000000001", tag: "h3", text: "How long?" }, { id: "a000000001", tag: "p", text: "Three weeks." }] }] }));
+        expect(acc).toContain('<div data-kit-item=""><h3 data-kit-head="">How long?</h3><p data-kit-body="">Three weeks.</p></div>');
+        const mq = draw(tree({ id: "root000011", tag: "ul", class: "flex gap-8", behavior: { name: "marquee", seconds: 20, reverse: false }, children: [{ id: "li00000001", tag: "li", text: "Acme" }] }));
+        expect(mq).toContain('<div class="kit-marquee-track" data-kit-track=""><div class="kit-marquee-group"><li>Acme</li></div><div class="kit-marquee-group" data-kit-copy="" aria-hidden="true" inert=""><li>Acme</li></div></div>');
+        const rv = draw(tree({ id: "root000012", tag: "div", behavior: { name: "reveal", effect: "left", stagger: 80 } }));
+        expect(rv).toContain('data-kit-behavior="reveal" data-kit-settings="{&quot;effect&quot;:&quot;left&quot;,&quot;stagger&quot;:80}" data-kit-effect="left"');
+        expect(nodeClasses({ id: "stk0000001", tag: "aside", class: "p-4", behavior: { name: "sticky", top: 24 } })).toEqual(["kit:p-4", "kit:sticky", "kit:top-[24px]"]);
+    });
+    it("each behavior with a script is one that can be sent alone, its code and its starter", () => {
+        for (const name of Object.keys(BEHAVIOR_RUNS)) {
+            const js = behaviorScript(name);
+            expect(() => new Function(js)).not.toThrow();
+            expect(js).toContain(`"${name}"`);
+        }
+        expect(behaviorScript("sticky")).toBeNull();
+    });
+});
+describe("the kit's sections, with built ones", () => {
+    const site = defineSite({ ...sections });
+    const page = (blocks, extra = {}) => ({ url: "https://acme.example", business: { name: "Acme" }, ...extra, pages: [{ path: "/", title: "Acme", description: "Acme does things.", blocks }] });
+    it("takes built and use blocks, components, and refuses a tree with an id twice or a component it hasn't", () => {
+        expect(isKitSection("built") && isKitSection("use")).toBe(true);
+        const root = { id: "root000013", tag: "section", children: [{ id: "head000002", tag: "h2", text: "Hi" }] };
+        expect(site.parse(page([{ type: "built", root }])).problems).toBeUndefined();
+        const twice = { ...root, children: [root.children[0], root.children[0]] };
+        expect(site.parse(page([{ type: "built", root: twice }])).problems?.join(" ")).toMatch(/head000002 is used twice/);
+        expect(site.parse(page([{ type: "use", component: "case-card" }])).problems?.join(" ")).toMatch(/no component called case-card/);
+        const withComponent = page([{ type: "use", component: "case-card", slots: { title: { text: "Hi" } } }], { components: [{ key: "case-card", name: "Case card", root }] });
+        expect(site.parse(withComponent).problems).toBeUndefined();
+        expect(site.parse(page([{ type: "built", root: { ...root, class: "bg-[url(x)]" } }])).problems?.join(" ")).toMatch(/Not allowed: bg-\[url\(x\)\]/);
+    });
+    it("says its schema, trees and all, for CalOS", () => {
+        const json = JSON.stringify(site.jsonSchema());
+        expect(json).toContain("Built section");
+        expect(json).toContain('"components"');
+    });
+    it("collects every class and behavior a site's trees use: built sections, saved ones and components", () => {
+        const s = {
+            pages: [{ blocks: [{ type: "built", root: { id: "a000000001", tag: "div", class: "p-4 bg-[url(x)]", behavior: { name: "reveal" }, children: [{ id: "b000000001", tag: "p", class: "md:text-h2", hidden: true }] } }, { type: "hero" }] }],
+            saved: [{ name: "x", block: { type: "built", root: { id: "c000000001", tag: "div", class: "flex" } } }],
+            components: [{ key: "k", name: "K", root: { id: "d000000001", tag: "div", class: "grid", behavior: { name: "carousel" } } }],
+        };
+        expect([...classesIn(s)].sort()).toEqual(["kit:flex", "kit:grid", "kit:md:text-h2", "kit:p-4"]);
+        expect([...behaviorsIn(s)].sort()).toEqual(["carousel", "reveal"]);
+    });
+});
+describe("built sections' CSS", () => {
+    it("is Tailwind's, for those classes only, with no reset, unlayered, and the Look as its theme", async () => {
+        const css = await builtCss(["kit:p-4", "kit:md:hover:bg-brand/90", "kit:text-h1", "kit:bg-dark-sand", "kit:font-display", "kit:rounded-card", "kit:max-w-content"], ["dark-sand"]);
+        expect(css).toContain(".kit\\:p-4 {");
+        expect(css).toContain("var(--look-brand, #111)");
+        expect(css).toContain("font-size: var(--look-type-h1-size, 56px)");
+        expect(css).toContain("background-color: var(--look-swatch-dark-sand)");
+        expect(css).toContain("font-family: var(--look-heading-font, inherit)");
+        expect(css).toContain("border-radius: var(--look-radius, 8px)");
+        expect(css).toContain("max-width: var(--look-width, 1200px)");
+        // Nothing for a class of the site's own, no reset of its elements, no layer the site's CSS would beat.
+        expect(css).not.toMatch(/\n\.flex|box-sizing|@layer (theme|base|utilities)|^\/\*!/);
+        expect(await builtCss([])).toBe("");
+    });
+    it("names the site's own colours by their slugs, never over Tailwind's own words or the roles", () => {
+        expect(swatchSlugs({ "--look-swatch-dark-sand": "#c2a", "--look-swatch-1": "#c2a", "--look-swatch-current": "#000", "--look-swatch-brand": "#111", "--look-brand": "#111" })).toEqual(["dark-sand"]);
+        expect(tailwindInput(["dark-sand"])).toContain("--color-dark-sand: var(--look-swatch-dark-sand);");
+        expect(tailwindInput()).toStartWith('@import "tailwindcss/theme.css" prefix(kit);\n@import "tailwindcss/utilities.css";');
+    });
+    it("is made by prepare into the site's public files, with each behavior's script, and cleared when there are none", async () => {
+        const kit = pathToFileURL(join(import.meta.dir, "content", "index.ts")).href;
+        const kitSections = pathToFileURL(join(import.meta.dir, "sections", "index.ts")).href;
+        const root = await mkdtemp(join(tmpdir(), "site-"));
+        await mkdir(join(root, "content"), { recursive: true });
+        await writeFile(join(root, "content", "schema.ts"), `import { defineSite } from ${JSON.stringify(kit)};\nimport { sections } from ${JSON.stringify(kitSections)};\nexport default defineSite({ ...sections }, { look: { brand: "#2b5f8a", palette: [{ name: "Dark sand", color: "#8a6d3b" }] } });\n`);
+        const site = (blocks) => writeFile(join(root, "content", "site.json"), JSON.stringify({ url: "https://acme.example", business: { name: "Acme" }, pages: [{ path: "/", title: "Acme", description: "Acme does things.", blocks }] }));
+        await site([{ type: "built", root: { id: "root000014", tag: "div", class: "p-4 bg-dark-sand", behavior: { name: "carousel" }, children: [{ id: "s000000007", tag: "p", text: "One" }] } }]);
+        const p = await prepare(root, {}, () => { });
+        expect(p.built?.css).toMatch(/^\/_kit\/built\.[0-9a-f]{10}\.css$/);
+        expect(p.built?.scripts?.carousel).toMatch(/^\/_kit\/carousel\.[0-9a-f]{10}\.js$/);
+        const css = await readFile(join(root, "public", p.built.css), "utf8");
+        expect(css).toContain("background-color: var(--look-swatch-dark-sand)");
+        expect(await readFile(join(root, "public", p.built.scripts.carousel), "utf8")).toContain('"carousel"');
+        await site([{ type: "own", columns: [{ parts: [] }] }]);
+        const again = await prepare(root, {}, () => { });
+        expect(again.built).toBeUndefined();
+        expect(existsSync(join(root, "public", "_kit"))).toBe(false);
+    });
+});
+describe("the preview", () => {
+    it("lets Tailwind's browser build write its styles on the preview page only", async () => {
+        const root = await mkdtemp(join(tmpdir(), "site-"));
+        await mkdir(join(root, ".site"), { recursive: true });
+        await mkdir(join(root, "out"), { recursive: true });
+        await writeFile(join(root, ".site", "prepared.json"), JSON.stringify({ site: { url: "https://acme.example", business: { name: "Acme" }, redirects: [], pages: [{ path: "/", blocks: [] }] }, images: {}, csp: {} }));
+        await writeFile(join(root, "out", "index.html"), "<html><head><style>a{}</style></head><body></body></html>");
+        await writeFile(join(root, "out", "calos-preview.html"), "<html><head><style>a{}</style></head><body></body></html>");
+        await finish(root, join(root, "out"), {}, () => { });
+        expect(await readFile(join(root, "out", "calos-preview.html"), "utf8")).toContain("style-src 'self' 'unsafe-inline';");
+        const page = await readFile(join(root, "out", "index.html"), "utf8");
+        expect(page).toMatch(/style-src 'self' 'sha256-[^']+';/);
+        expect(page).not.toContain("unsafe-inline");
+    });
+    it("matches a click only against what's seen: not a slide faded out over the one showing", () => {
+        const shown = { ariaHidden: null, visibility: "visible", display: "block", opacity: "1" };
+        expect(isShown([shown, shown])).toBe(true);
+        expect(isShown([shown, { ...shown, opacity: "0" }])).toBe(false);
+        expect(isShown([{ ...shown, ariaHidden: "true" }])).toBe(false);
+        expect(isShown([shown, { ...shown, inert: true }])).toBe(false);
+        expect(isShown([{ ...shown, visibility: "hidden" }])).toBe(false);
+    });
+    it("draws a node as hovered by its hover classes without the state", () => {
+        expect(withoutVariant("kit:md:hover:bg-ink", ["hover"])).toBe("kit:md:bg-ink");
+        expect(withoutVariant("kit:group-hover:underline", ["group-hover"])).toBe("kit:underline");
+        expect(withoutVariant("kit:bg-ink", ["hover"])).toBeNull();
+        expect(withoutVariant("hover:bg-ink", ["hover"])).toBeNull();
+    });
+});