@caltho/site-kit 0.2.10 → 0.3.0

package/dist/content/lists.test.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import { behaviorsIn, classesIn } from "../built/tree.js";
+import { built, node, treeProblems } from "../tree/index.js";
+import { BuiltSection } from "../next/built.js";
+import { pageAt, setPrepared } from "../next/data.js";
+import { sitemap, staticParams } from "../next/metadata.js";
+import { sitemapXml } from "../seo.js";
+import { allPages, defineSite, fromList, itemOf, text, withListItems, z } from "./index.js";
+// Lists (cal-os docs/design/site-lists.md): items kept once in the content, repeated by built
+// sections, and each item of a list with a page at its own address, drawn from one design.
+const content = defineSite({ hero: z.object({ heading: text }), built, list: z.object({ heading: text }) });
+const productPage = {
+    path: "/products/",
+    title: "name",
+    description: "summary",
+    blocks: [
+        {
+            type: "built",
+            root: {
+                id: "prodroot01",
+                tag: "section",
+                class: "p-6",
+                children: [
+                    { id: "prodname01", tag: "h1", class: "text-4xl", bind: { path: "this.name" } },
+                    { id: "prodpric01", tag: "p", bind: { path: "this.price" } },
+                    { id: "prodphot01", tag: "img", bind: { path: "this.photo" } },
+                    { id: "prodrela01", tag: "ul", children: [{ id: "prodrelb01", tag: "li", repeat: { path: "lists.products.items" }, bind: { path: "item.name" } }] },
+                ],
+            },
+        },
+    ],
+};
+const raw = (over = {}) => ({
+    url: "https://acme.example",
+    business: { name: "Acme" },
+    pages: [
+        { path: "/", title: "Acme", description: "Acme does things.", blocks: [{ type: "hero", heading: "Hello" }] },
+        { path: "/products/", title: "Products", description: "What we make.", blocks: [{ type: "hero", heading: "Products" }] },
+    ],
+    lists: {
+        products: {
+            name: "Products",
+            fields: [
+                { key: "name", label: "Name", kind: "text" },
+                { key: "summary", label: "Summary", kind: "longText" },
+                { key: "price", label: "Price", kind: "number" },
+                { key: "photo", label: "Photo", kind: "image" },
+            ],
+            items: [
+                { id: "rec-1", slug: "walnut-desk", name: "Walnut desk", summary: "Solid walnut.", price: 1200, photo: { src: "desk.jpg", alt: "The desk" } },
+                { id: "rec-2", slug: "oak-chair", name: "Oak chair", summary: "Sits well.", price: 300 },
+            ],
+            page: structuredClone(productPage),
+        },
+    },
+    ...over,
+});
+describe("a site's lists", () => {
+    it("takes lists, and a site without any has none", () => {
+        expect(content.parse(raw()).problems).toBeUndefined();
+        const none = raw();
+        delete none.lists;
+        expect(content.parse(none).site.lists).toEqual({});
+    });
+    it("refuses a value of the wrong kind, a field the list hasn't, an address used twice or a page's address, and a title that isn't words", () => {
+        const r = raw();
+        const items = r.lists.products.items;
+        items[0].price = "a lot";
+        items[0].colour = "red";
+        items[1].slug = "walnut-desk";
+        r.pages.push({ path: "/products/oak-table/", title: "Oak table", description: "A page of its own.", blocks: [{ type: "hero", heading: "Oak" }] });
+        items.push({ id: "rec-3", slug: "oak-table", name: "Oak table" });
+        r.lists.products.page.title = "price";
+        const problems = content.parse(r).problems.join("\n");
+        expect(problems).toMatch(/price: Not a number value/);
+        expect(problems).toMatch(/colour isn't one of Products's fields/);
+        expect(problems).toMatch(/Two items have the address walnut-desk/);
+        expect(problems).toMatch(/There's a page at \/products\/oak-table\/ already/);
+        expect(problems).toMatch(/The title is one of the list's fields of words/);
+    });
+    it("refuses an address that isn't lowercase words and dashes, and a field called id or slug", () => {
+        const r = raw();
+        r.lists.products.items[0].slug = "Walnut Desk";
+        r.lists.products.fields.push({ key: "slug", label: "Slug", kind: "text" });
+        const problems = content.parse(r).problems.join("\n");
+        expect(problems).toMatch(/Lowercase letters, numbers and dashes/);
+        expect(problems).toMatch(/id and slug are an item's own/);
+    });
+    it("gives each item a page at its list's address, titled, described and shared by its own values", () => {
+        const site = content.parse(raw()).site;
+        const items = allPages(site).filter((p) => itemOf(p));
+        expect(items.map((p) => [p.path, p.title, p.description])).toEqual([
+            ["/products/walnut-desk/", "Walnut desk", "Solid walnut."],
+            ["/products/oak-chair/", "Oak chair", "Sits well."],
+        ]);
+        expect(items[0].share).toEqual({ src: "desk.jpg", alt: "The desk" });
+    });
+    it("finds an item's page at its address, lists it for the build and the sitemap, and checks links to it", () => {
+        const site = content.parse(raw()).site;
+        setPrepared({ site, images: {}, csp: {} }, false);
+        expect(pageAt(["products", "oak-chair"])?.title).toBe("Oak chair");
+        expect(pageAt(["products"])?.title).toBe("Products");
+        expect(pageAt(["products", "nothing"])).toBeNull();
+        expect(staticParams()).toContainEqual({ path: ["products", "walnut-desk"] });
+        expect(sitemap().map((u) => u.url)).toContain("https://acme.example/products/oak-chair/");
+        expect(sitemapXml(site)).toContain("/products/walnut-desk/");
+        // A link to an item's page lands; one to an item there isn't doesn't.
+        const linked = raw();
+        linked.pages[0].blocks = [{ type: "built", root: { id: "linkroot01", tag: "a", text: "Desk", href: "/products/walnut-desk/" } }];
+        expect(content.parse(linked).problems).toBeUndefined();
+        linked.pages[0].blocks[0].root.href = "/products/pine-bed/";
+        expect(content.parse(linked).problems.join("\n")).toMatch(/No page at \/products\/pine-bed\//);
+    });
+    it("draws an item's page with this. for the item and item. for a repeat's", () => {
+        const site = content.parse(raw()).site;
+        setPrepared({ site, images: {}, csp: {} }, true);
+        const page = pageAt(["products", "walnut-desk"]);
+        const html = renderToStaticMarkup(_jsx(BuiltSection, { s: page.blocks[0] }));
+        expect(html).toContain(">Walnut desk</h1>");
+        expect(html).toContain(">1200</p>");
+        expect(html).toContain('alt="The desk"');
+        expect(html).toContain("<li");
+        expect(html).toContain(">Oak chair</li>");
+    });
+    it("builds CSS and behaviors for a list's page design, which only its items draw", () => {
+        const site = content.parse(raw()).site;
+        expect([...classesIn(site)]).toEqual(["kit:p-6", "kit:text-4xl"]);
+        expect([...behaviorsIn(site)]).toEqual([]);
+    });
+});
+describe("a section's items from a list", () => {
+    const site = {
+        trailingSlash: true,
+        lists: {
+            services: {
+                name: "Services",
+                fields: [
+                    { key: "name", label: "Name", kind: "text" },
+                    { key: "summary", label: "Summary", kind: "longText" },
+                    { key: "photo", label: "Photo", kind: "image" },
+                ],
+                items: [
+                    { id: "a", slug: "bookkeeping", name: "Bookkeeping", summary: "Monthly books.", photo: { src: "uploads/b.jpg", alt: "A ledger" } },
+                    { id: "b", slug: "payroll", name: "Payroll" },
+                ],
+                page: { path: "/services/", title: "name", blocks: [] },
+            },
+        },
+    };
+    const block = { type: "services", heading: "What we do", items: [{ title: "Typed", text: "Typed" }], from: { list: "services", into: "items", fields: { title: "name", text: "summary", image: "photo", href: "@page" } } };
+    it("fills the section's items from the list, each linked to its page", () => {
+        const out = withListItems(block, site);
+        expect(out.items).toEqual([
+            { title: "Bookkeeping", text: "Monthly books.", image: { src: "uploads/b.jpg", alt: "A ledger" }, href: "/services/bookkeeping/" },
+            // Words it hasn't are empty words; a picture it hasn't is left out.
+            { title: "Payroll", text: "", href: "/services/payroll/" },
+        ]);
+    });
+    it("keeps the typed items where the list isn't there, and when none is picked", () => {
+        expect(withListItems({ ...block, from: { ...block.from, list: "gone" } }, site)).toEqual({ ...block, from: { ...block.from, list: "gone" } });
+        const { from: _, ...typed } = block;
+        expect(withListItems(typed, site)).toBe(typed);
+    });
+    it("is what a page draws", () => {
+        const pages = allPages({ ...site, pages: [{ path: "/services/", title: "Services", description: "", blocks: [block] }] });
+        expect(pages[0].blocks[0].items).toHaveLength(2);
+    });
+    it("is a field a section adds, naming the array it fills", () => {
+        const schema = z.object({ items: z.array(z.object({ title: text })), from: fromList("items") });
+        expect(schema.parse({ items: [], from: { list: "services", fields: { title: "name" } } }).from).toEqual({ list: "services", into: "items", fields: { title: "name" } });
+        expect(() => schema.parse({ items: [], from: { list: "services", into: "people" } })).toThrow();
+    });
+});
+describe("a link bound to a list's value", () => {
+    it("goes to an email address as mailto: and a phone number as tel:, anything else as it is", async () => {
+        const { linkFor } = await import("../next/built.js");
+        expect(linkFor("team@caltho.com")).toBe("mailto:team@caltho.com");
+        expect(linkFor("(215) 555-0100")).toBe("tel:2155550100");
+        expect(linkFor("+1 215 555 0100")).toBe("tel:+12155550100");
+        expect(linkFor("/services/")).toBe("/services/");
+        expect(linkFor("https://caltho.com")).toBe("https://caltho.com");
+    });
+});
+describe("a filter over a list", () => {
+    it("marks each item with its value of the filter's field, and leaves its buttons as buttons", () => {
+        const site = { lists: { work: { name: "Work", fields: [{ key: "name", label: "Name", kind: "text" }, { key: "industry", label: "Industry", kind: "text" }], items: [{ id: "a", slug: "boat", name: "Boat", industry: "Hospitality" }, { id: "b", slug: "agency", name: "Agency", industry: "Real Estate" }] } } };
+        setPrepared({ site, images: {}, csp: {} }, false);
+        const block = {
+            type: "built",
+            root: {
+                id: "filtroot01", tag: "section", behavior: { name: "filter", field: "industry" }, children: [
+                    { id: "filtbtns01", tag: "div", children: [{ id: "filtall001", tag: "button", text: "All", class: "aria-pressed:bg-ink" }, { id: "filtre0001", tag: "button", text: "Real estate" }] },
+                    { id: "filtgrid01", tag: "ul", children: [{ id: "filtitem01", tag: "li", repeat: { path: "lists.work.items" }, bind: { path: "item.name" } }] },
+                ],
+            },
+        };
+        const html = renderToStaticMarkup(_jsx(BuiltSection, { s: block }));
+        expect(html).toContain('data-kit-behavior="filter"');
+        expect(html).toMatch(/<li[^>]*data-kit-filter-value="hospitality"[^>]*>Boat<\/li>/);
+        expect(html).toMatch(/<li[^>]*data-kit-filter-value="real-estate"[^>]*>Agency<\/li>/);
+        expect(html).toMatch(/<button[^>]*type="button"[^>]*>All<\/button>/);
+    });
+});
+describe("a form in a built section", () => {
+    const form = {
+        id: "formroot01", tag: "form", class: "grid gap-4", children: [
+            { id: "formlab001", tag: "label", for: "formname01", text: "Your name" },
+            { id: "formname01", tag: "input", field: { name: "name", required: true, placeholder: "Jane" } },
+            { id: "formmsg001", tag: "textarea", field: { name: "message", rows: 4 } },
+            { id: "formhow001", tag: "select", field: { name: "how", placeholder: "Pick one" }, children: [{ id: "formopt001", tag: "option", text: "Email" }] },
+            { id: "formsend01", tag: "button", text: "Send message" },
+        ],
+    };
+    it("posts to the site's own form address with each field by its name, a label naming its field, the spam trap, and a button that sends", () => {
+        setPrepared({ site: { form: "https://forms.caltho.com/f/abc" }, images: {}, csp: {} }, false);
+        const html = renderToStaticMarkup(_jsx(BuiltSection, { s: { type: "built", root: form } }));
+        const tag = (name) => html.match(new RegExp(`<${name}\\b[^>]*>`))?.[0] ?? "";
+        expect(tag("form")).toContain('method="post"');
+        expect(tag("form")).toContain('action="https://forms.caltho.com/f/abc"');
+        expect(html).toMatch(/<label[^>]*for="kit-f-formname01"[^>]*>Your name<\/label>/);
+        const name = html.match(/<input[^>]*id="kit-f-formname01"[^>]*>/)?.[0] ?? "";
+        for (const a of ['name="name"', 'type="text"', 'required=""', 'placeholder="Jane"'])
+            expect(name).toContain(a);
+        expect(html).toMatch(/<textarea[^>]*name="message"[^>]*rows="4"/);
+        expect(html).toMatch(/<select[^>]*name="how"[^>]*>.*<option value="Email">Email<\/option>/);
+        expect(html).toContain('name="_website"');
+        expect(html).toMatch(/<button[^>]*type="submit"[^>]*>Send message<\/button>/);
+    });
+    it("can't be sent where the site has no form address yet, and a field outside a form is refused", () => {
+        setPrepared({ site: {}, images: {}, csp: {} }, false);
+        const html = renderToStaticMarkup(_jsx(BuiltSection, { s: { type: "built", root: form } }));
+        expect(html).not.toContain("<form");
+        expect(html).toContain("data-kit-form-unset");
+        expect(treeProblems({ id: "rootrootxx", tag: "div", children: [{ id: "lonefield1", tag: "input", field: { name: "email" } }] }).join(" ")).toMatch(/belongs inside a form/);
+    });
+    it("sends to the business's form it names, by key; one the site wasn't given isn't sent anywhere", () => {
+        const quote = { ...form, sendTo: "quote" };
+        setPrepared({ site: { form: "https://forms.caltho.com/f/abc", forms: { quote: "https://acme.caltho.app/api/forms/quote/k1" } }, images: {}, csp: {} }, false);
+        expect(renderToStaticMarkup(_jsx(BuiltSection, { s: { type: "built", root: quote } }))).toContain('action="https://acme.caltho.app/api/forms/quote/k1"');
+        const html = renderToStaticMarkup(_jsx(BuiltSection, { s: { type: "built", root: { ...form, sendTo: "gone" } } }));
+        expect(html).not.toContain("<form");
+        expect(node.safeParse({ id: "abcdefgh12", tag: "div", sendTo: "quote" }).success).toBe(false);
+        expect(node.safeParse({ ...form, sendTo: "https://evil.example" }).success).toBe(false);
+        const picked = renderToStaticMarkup(_jsx(BuiltSection, { s: { type: "built", root: { ...form, children: [{ id: "byemail001", tag: "input", field: { name: "reach", type: "radio", value: "email", checked: true } }] } } }));
+        expect(picked).toMatch(/<input[^>]*checked=""[^>]*value="email"/);
+    });
+    it("shows a picture's phone version in its place on a small screen", () => {
+        const prepared = (src, w, h) => ({ src: `/_img/${src}`, width: w, height: h, srcset: [{ url: `/_img/${src}.800.webp`, w: 800 }] });
+        setPrepared({ site: {}, images: { "uploads/today.png": prepared("today.png", 2880, 1400), "uploads/today-phone.png": prepared("today-phone.png", 1170, 1992) }, csp: {} }, false);
+        const shot = { id: "shotshot01", tag: "img", class: "w-full", image: { src: "uploads/today.png", alt: "Today", phoneSrc: "uploads/today-phone.png" } };
+        const html = renderToStaticMarkup(_jsx(BuiltSection, { s: { type: "built", root: { id: "rootroot01", tag: "div", children: [shot] } } }));
+        expect(html).toMatch(/<picture><source media="\(max-width: 700px\)"[^>]*today-phone[^>]*\/><img[^>]*today\.png[^>]*alt="Today"/);
+        expect(node.safeParse({ ...shot, image: { ...shot.image, phoneSrc: "https://evil.example/x.png" } }).success).toBe(false);
+    });
+});

package/dist/content/look.d.ts

@@ -1,4 +1,18 @@
 import { z } from "zod";
+export declare const TYPE_ROLES: readonly ["display", "h1", "h2", "h3", "body", "small"];
+export type TypeRole = (typeof TYPE_ROLES)[number];
+export type TypeStyle = {
+    size?: number;
+    weight?: 300 | 400 | 500 | 600 | 700;
+    tracking?: number;
+    leading?: number;
+};
+export type TypeScale = Partial<Record<TypeRole, TypeStyle>>;
+export type Swatch = {
+    name: string;
+    color: string;
+};
+export type Space = "compact" | "normal" | "roomy";
 export type LookOptions = {
     /** The fonts the site carries, by the name CalOS shows → the font-family it's drawn with. */
     fonts?: Record<string, string>;
@@ -8,19 +22,183 @@ export type LookOptions = {
     /** The site's own colours, used until others are chosen. */
     brand: string;
     accent?: string;
-    /** The page's background, which a brand colour must read against. */
+    /** The page's background, which a brand colour must read against (`background` is the older name). */
+    page?: string;
     background?: string;
+    /** The site's main text colour (a dark section's background). */
+    ink?: string;
+    /** Quieter text, lines and borders, a quiet section's background: worked out from page and ink when not given. */
+    muted?: string;
+    line?: string;
+    soft?: string;
+    /** Colours of the site's own, by name. */
+    palette?: Swatch[];
+    /** The site's type scale: px sizes, weights, tracking (em) and line height, by role. */
+    type?: TypeScale;
+    /** The content's width in px (800–1600). */
+    width?: number;
+    /** The space each side of the content, in px, on a wide screen (8–96; 40 unless said): half of it on a phone, growing with the screen between. A site's own sections and the kit's line up when its CSS reads --look-gutter. */
+    gutter?: number;
+    /** The space above and below each section. */
+    space?: Space;
     corners?: Corners;
     buttons?: Buttons;
+    /** The site's header, until the business chooses otherwise (headerOf). */
+    header?: HeaderLook;
+};
+/**
+ * The header: whether it stays at the top as the page scrolls, how it's set apart from the page
+ * (a line under it, nothing, the brand colour, or a bar floating over the page), and where the
+ * name and menu sit (name left and menu right, all centred, or name and menu together on the left).
+ */
+export type HeaderLook = {
+    sticky?: boolean;
+    style?: HeaderStyle;
+    layout?: HeaderLayout;
+    menuShows?: MenuShows;
+    menuStyle?: string;
+};
+/** The phone's menu button: what it shows (its icon, the word, both); its look is a button style (menuStyle). */
+export declare const MENU_SHOWS: readonly ["both", "icon", "word"];
+export type MenuShows = (typeof MENU_SHOWS)[number];
+/** A button style of the business's own: its colours by the theme's names, border, corners, size and lettering. */
+export type ButtonStyle = {
+    name: string;
+    /** Its fill: a role, a palette colour's slug, or "none" (an outline). */
+    fill?: string;
+    /** Its words' colour: a role or palette slug; else whichever of the page and text reads on the fill. */
+    text?: string;
+    border?: {
+        width?: number;
+        color?: string;
+    };
+    /** Its corners in px, or 999 for round ends. */
+    radius?: number;
+    size?: "small" | "medium" | "large";
+    weight?: number;
+    caps?: boolean;
+};
+export declare const BUTTON_SIZES: readonly ["small", "medium", "large"];
+/** How many styles of its own a site can have (the classes sections.css draws, kit-btn-1 to -8). */
+export declare const MAX_BUTTON_STYLES = 8;
+/** The theme's own, always there: a style of the business's can't take their names. */
+export declare const THEME_BUTTONS: readonly ["main", "accent", "quiet"];
+export declare const HEADER_STYLES: readonly ["line", "plain", "brand", "floating"];
+export declare const HEADER_LAYOUTS: readonly ["spread", "centered", "left"];
+export type HeaderStyle = (typeof HEADER_STYLES)[number];
+export type HeaderLayout = (typeof HEADER_LAYOUTS)[number];
+/** The header as it's drawn: what the business chose, else the site's own, else the kit's. */
+export declare function headerOf(look: Look | undefined, o: Pick<LookOptions, "header">): Required<Omit<HeaderLook, "menuStyle">> & {
+    menuStyle?: string;
 };
 declare const CORNERS: readonly ["square", "soft", "round"];
 declare const BUTTONS: readonly ["solid", "outline"];
 type Corners = (typeof CORNERS)[number];
 type Buttons = (typeof BUTTONS)[number];
+/** The colours of the page any section's background may be, beside the site's own (by their slug). */
+/**
+ * The kit's fonts (fonts.css, imported once in the site's layout): variable, every weight, by the
+ * name CalOS shows and the family it's drawn with. A site's look.ts lists them as its fonts (with
+ * any of its own), so the business picks any of them for its headings and text.
+ */
+export declare const KIT_FONTS: Record<string, string>;
+export declare const COLOUR_ROLES: readonly ["page", "soft", "brand", "accent", "ink"];
+export type ColourRole = (typeof COLOUR_ROLES)[number];
+/** The kit's type scale, for what a site doesn't say. */
+export declare const KIT_TYPE: Record<TypeRole, Required<TypeStyle>>;
+/** A colour of the site's own as a CSS name: "Dark sand" → "dark-sand" (runs of anything else one dash, none at the ends). */
+export declare function swatchSlug(name: string): string;
 /** The Look's fields, for the site's content. */
 export declare function lookSchema(o: LookOptions): z.ZodOptional<z.ZodObject<{
+    uploadedFonts?: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        family: z.ZodString;
+        files: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            weight: z.ZodString;
+            style: z.ZodEnum<{
+                normal: "normal";
+                italic: "italic";
+            }>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>> | undefined;
+    footer?: z.ZodDefault<z.ZodObject<{
+        background: z.ZodDefault<z.ZodString>;
+    }, z.core.$strip>> | undefined;
+    header?: z.ZodDefault<z.ZodObject<{
+        sticky: z.ZodDefault<z.ZodBoolean>;
+        style: z.ZodDefault<z.ZodEnum<{
+            line: "line";
+            plain: "plain";
+            brand: "brand";
+            floating: "floating";
+        }>>;
+        layout: z.ZodDefault<z.ZodEnum<{
+            left: "left";
+            spread: "spread";
+            centered: "centered";
+        }>>;
+        menuShows: z.ZodDefault<z.ZodEnum<{
+            icon: "icon";
+            both: "both";
+            word: "word";
+        }>>;
+        menuStyle: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>> | undefined;
     brand: z.ZodDefault<z.ZodString>;
     accent: z.ZodDefault<z.ZodString>;
+    page: z.ZodDefault<z.ZodString>;
+    ink: z.ZodDefault<z.ZodString>;
+    muted: z.ZodDefault<z.ZodString>;
+    line: z.ZodDefault<z.ZodString>;
+    soft: z.ZodDefault<z.ZodString>;
+    palette: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        color: z.ZodString;
+    }, z.core.$strip>>>;
+    type: z.ZodDefault<z.ZodObject<{
+        h1: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 600 | 500 | 300 | 700>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        h2: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 600 | 500 | 300 | 700>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        h3: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 600 | 500 | 300 | 700>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        small: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 600 | 500 | 300 | 700>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        body: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 600 | 500 | 300 | 700>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+        display: z.ZodOptional<z.ZodObject<{
+            size: z.ZodOptional<z.ZodNumber>;
+            weight: z.ZodOptional<z.ZodLiteral<400 | 600 | 500 | 300 | 700>>;
+            tracking: z.ZodOptional<z.ZodNumber>;
+            leading: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
+    width: z.ZodDefault<z.ZodNumber>;
+    space: z.ZodDefault<z.ZodEnum<{
+        normal: "normal";
+        compact: "compact";
+        roomy: "roomy";
+    }>>;
     corners: z.ZodDefault<z.ZodEnum<{
         square: "square";
         soft: "soft";
@@ -30,30 +208,103 @@ export declare function lookSchema(o: LookOptions): z.ZodOptional<z.ZodObject<{
         solid: "solid";
         outline: "outline";
     }>>;
-    headingFont?: z.ZodDefault<z.ZodEnum<{
-        [x: string]: string;
-    }>> | undefined;
-    bodyFont?: z.ZodDefault<z.ZodEnum<{
-        [x: string]: string;
-    }>> | undefined;
+    radius: z.ZodOptional<z.ZodNumber>;
+    buttonRadius: z.ZodOptional<z.ZodNumber>;
+    buttonStyles: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        fill: z.ZodOptional<z.ZodString>;
+        text: z.ZodOptional<z.ZodString>;
+        border: z.ZodOptional<z.ZodObject<{
+            width: z.ZodOptional<z.ZodNumber>;
+            color: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        radius: z.ZodOptional<z.ZodNumber>;
+        size: z.ZodOptional<z.ZodEnum<{
+            small: "small";
+            medium: "medium";
+            large: "large";
+        }>>;
+        weight: z.ZodOptional<z.ZodNumber>;
+        caps: z.ZodOptional<z.ZodBoolean>;
+    }, z.core.$strip>>>;
+    buttonBorder: z.ZodOptional<z.ZodObject<{
+        width: z.ZodNumber;
+        color: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    headingFont?: z.ZodDefault<z.ZodString> | undefined;
+    bodyFont?: z.ZodDefault<z.ZodString> | undefined;
+}, z.core.$strip>>;
+/** A button style's name, by its slug where a button names it ("main", "accent", "quiet", or one of the business's). */
+export declare const buttonStyleName: z.ZodString;
+declare const uploadedFonts: z.ZodArray<z.ZodObject<{
+    family: z.ZodString;
+    files: z.ZodArray<z.ZodObject<{
+        src: z.ZodString;
+        weight: z.ZodString;
+        style: z.ZodEnum<{
+            normal: "normal";
+            italic: "italic";
+        }>;
+    }, z.core.$strip>>;
 }, z.core.$strip>>;
+export type UploadedFont = z.infer<typeof uploadedFonts>[number];
+/** The @font-face rules for an uploaded font, each file at the address `at` gives its path. */
+export declare function uploadedFontCss(f: UploadedFont, at: (src: string) => string): string;
 export type Look = {
     headingFont?: string;
     bodyFont?: string;
     brand?: string;
     accent?: string;
+    page?: string;
+    ink?: string;
+    muted?: string;
+    line?: string;
+    soft?: string;
+    palette?: Swatch[];
+    type?: TypeScale;
+    width?: number;
+    space?: Space;
     corners?: Corners;
     buttons?: Buttons;
+    /** Exact corners in px, past the presets: cards and pictures, and buttons (999: a pill). */
+    radius?: number;
+    buttonRadius?: number;
+    /** A border round buttons: px wide, in a role's or a palette colour's colour (else the button's own). */
+    buttonBorder?: {
+        width?: number;
+        color?: string;
+    };
+    /** Button styles of the business's own, past the theme's Main, Accent and Quiet: each button picks one by its name's slug. */
+    buttonStyles?: ButtonStyle[];
+    header?: HeaderLook;
+    /** The kit footer's background: "dark" (the site's own), a colour role, or a palette colour's slug. */
+    footer?: {
+        background?: string;
+    };
+    /** Fonts the business uploaded, each family's files (under fonts/ among the site's pictures). */
+    uploadedFonts?: UploadedFont[];
 };
 /** How readable one colour is on another (WCAG): 1 to 21. */
 export declare function contrast(a: string, b: string): number;
-/** The colours chosen that won't read: the brand colour is used for text and buttons on the page, so it must stand out from it. */
+/** Whether a colour is dark: white words read better on it than near-black ones. */
+export declare function isDark(color: string): boolean;
+/** The colours chosen that won't read: the brand colour is used for text and buttons on the page, so it must stand out from it; text must read on it; the site's own colours need names of their own. */
 export declare function lookProblems(look: Look | undefined, o: LookOptions): {
-    path: string[];
+    path: (string | number)[];
     message: string;
 }[];
 /** The Look as CSS variables: what's chosen, else the site's own. */
 export declare function lookVars(look: Look | undefined, o: LookOptions): Record<string, string>;
 /** The Look as a stylesheet for the page's head: `:root { … }`. */
 export declare function lookCss(look: Look | undefined, o: LookOptions): string;
+/**
+ * The colour a section's background names (a role, or one of the site's own by its slug), from the
+ * Look's variables; undefined when it names none.
+ */
+export declare function colourOf(name: string, vars: Record<string, string>): string | undefined;
+/**
+ * The class that draws a button in one of the business's own styles (kit-btn-3), from the Look's
+ * values (lookVars): undefined for the theme's own (main, accent, quiet) or a style it doesn't have.
+ */
+export declare function buttonStyleClass(style: string | undefined, vars: Record<string, string>): string | undefined;
 export {};