@caltho/site-kit 0.2.10 → 0.2.11

package/README.md

@@ -45,7 +45,11 @@ 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
+back to the field it meant with nothing added to the components. Which block a click landed in is
+exact where the page puts `<BlockMark at={i} />` (from `@caltho/site-kit/next`) before each block it
+draws: a block may then draw nothing (a list with nothing in it yet) or several elements. It draws
+nothing on the live site. Without marks, blocks are found among `main`'s children, by their words
+when there isn't one for each. 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);
@@ -62,7 +66,7 @@ the kit only checks it's a URL.
 | **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`, `previewOrigins`. The content is a store: on the server it reads `.site/prepared.json`; in the preview, what CalOS sends. |
+| **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`, `BlockMark` (where each block starts, for the preview), `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. |
 
@@ -74,10 +78,21 @@ them in its editor like the site's own, and Cal can add one. Today: **gallery**
 each with an optional caption, opening its largest copy; 2 to 4 across, square, landscape, portrait
 or as taken) and **slideshow** (photos one at a time, fading from one to the next, with captions).
 
-**Your own section** (`own`) is built in CalOS rather than in code: one to four columns (or a wide one
-beside a narrow one), each a list of parts (heading, text, photo, button, list, quote, facts in a row,
-price, photos in a grid, slideshow, space), left or centred, plain or in the brand colour. Its parts
-wear the site's own classes, so what's built looks like the site. One that's wanted again is saved by
+**Your own section** (`own`) is built in CalOS rather than in code: a heading and intro over one to
+four columns (or a wide one beside a narrow one), each a list of parts (heading, text, photo, button,
+list, quote, facts in a row, price, photos in a grid, slideshow, space, table, icon, logos, video),
+left or centred, plain or in the brand colour. A column can be drawn as a card (`card: true`). Its
+parts wear the site's own classes, so what's built looks like the site.
+
+- **table**: 2 to 5 columns (the first over the rows' labels, its heading may be ""), 1 to 20 rows,
+  a column picked out (`highlight`, counting from 1 after the labels). A cell "yes" or "no" is a tick
+  or a dash, read out as the word. A real table from 640px up; below, each row a small card.
+- **icon**: one of the kit's line icons by name (`ICON_NAMES`: check, calendar, clock, users, …),
+  drawn inline in the brand colour, small, medium or large.
+- **logos**: 2 to 12, in a row in grey, with a line above if it has one.
+- **video**: a YouTube or Vimeo address and what the video is (its title, for a screen reader), shown
+  in YouTube's no-cookie player or Vimeo's with tracking off. `finish` lets the player in
+  (`frame-src`) only on a page that shows one, and in the preview. One that's wanted again is saved by
 name in the content's `saved` list, and CalOS offers it beside the site's own kinds.
 
 `Slideshow` (from `@caltho/site-kit/next`) is also a building block a site's own sections use: SCV's
@@ -92,17 +107,51 @@ A site takes them in once, three lines:
 import { sections } from "@caltho/site-kit/sections";
 export const blocks = { ...sections, hero, about /* … */ };
 
-// the site's block renderer: whatever it hasn't a component for
-default:
-  return <KitSection s={block} />;
+// the site's page: every block after its mark, framed when it has a background, the kit drawing
+// whatever kind the site's own `render` leaves (returns null for)
+<KitBlocks blocks={page.blocks} render={(block, i) => <Block s={block} />} level={(i) => (i === 0 ? 1 : 2)} />
 
 // app/layout.tsx
 import "@caltho/site-kit/sections.css";
 ```
 
-From then on each section the kit adds reaches the site with `cal sites kit update`. They're themed by
-the site's Look (`--look-*`); a site with a design of its own gives its own classes so they sit in
-it like its own: `<KitSection s={block} classes={{ section: "", wrap: "mx-auto max-w-5xl px-4 py-12", heading: "font-display text-3xl", text: "…", button: "…", buttonQuiet: "…" }} />`.
+A section of the business's own has a background (`tone`: plain, soft, brand or dark, from the
+Look's `--look-*`, with `--look-page` and `--look-ink` from the Look's `background` and `ink`), space
+above and below (`spacing`: tight, normal, roomy) and can have a photo behind it (`background`, under
+a scrim). On soft, brand or dark it's a card inset within the content's width in the theme's corners
+(`shape: "card"`, the default) or a band across the page (`shape: "band"`). On brand, dark or a photo the kit keeps its words and buttons readable over the site's own
+colour classes. `presets` (from `@caltho/site-kit/sections`) are ready-made ones (an opening, words
+over a photo, three reasons, a client's words, prices, a call to get in touch, contact, common
+questions, a photo and words, facts in a row, a comparison, features with icons, a logo strip, a
+video), each an `own` block to add and edit like any other.
+
+From then on each section the kit adds reaches the site with `cal sites kit update`. They're drawn
+from the site's Look (`--look-*`: its type scale, colours, buttons, width and spacing) and need no
+classes of the site's; a site may still give its own for any part, in place of the kit's:
+`<KitBlocks … classes={{ headingLarge: "font-display text-3xl" }} />`.
+
+## The theme
+
+The Look is the site's theme. Beside its fonts, brand and accent colours, corners and buttons, it has
+the page's colours by role (`page`, `ink`, `muted`, `line`, `soft`), colours of the site's own by name
+(`palette`), a type scale (`type`: display, h1, h2, h3, body and small, each a size in px, a weight,
+tracking in em and a line height), the content's `width` and the `space` between sections. A site's
+`look` options are its design as it is (the defaults CalOS shows); its CSS reads the variables
+(`--look-page`, `--look-swatch-sand`, `--look-type-h2-size`, `--look-width`, `--look-section-pad`, the
+full list in src/content/look.ts) so a change in CalOS reaches every page. `--look-gutter` is the
+space each side of the content (the site's `gutter` option in px on a wide screen, 40 unless said,
+half on a phone): a site's own wrap reads it so its sections and the kit's line up.
+
+The menu edited in CalOS can have links under a link (`children`, up to 8, one level): `menuOf`
+returns them, and the site's header draws them (the starter: a dropdown on a wide screen, indented
+in the phone's menu). `blockLabel(block, kindTitle)` (`@caltho/site-kit/schema`) is what a block is
+called in a list: its heading, an `own` section's first heading part, else its kind.
+
+Every section's Layout (`placement`, on unless a site sets `placement: false`) has a **Background**: a
+colour (a role, or one of the site's own by its slug) and a photo under a shade. KitBlocks draws it as
+a frame around the section (`frameClass`), its words light when the colour or photo is dark
+(`backgroundIsDark`, from the Look's values at build and in the preview). The schema a site writes
+carries the ready-made sections its `own` kind takes, as `x-presets` at its root.
 
 ## Share cards
 

package/dist/cli/check.js

@@ -39,7 +39,12 @@ export async function check(dir, o = {}) {
         for (const [screen, viewport] of [
             ["computer", { width: 1280, height: 800 }],
             ["phone", { width: 390, height: 844 }],
+            // Sizes in between, looked at for what runs past the screen's edge only.
+            ["tablet", { width: 768, height: 1024 }],
+            ["small laptop", { width: 1024, height: 768 }],
+            ["wide screen", { width: 1600, height: 900 }],
         ]) {
+            const fullCheck = screen === "computer" || screen === "phone";
             const context = await browser.newContext({ viewport });
             const page = await context.newPage();
             let where = "";
@@ -54,6 +59,31 @@ export async function check(dir, o = {}) {
             for (const path of paths) {
                 where = path;
                 await page.goto(base + path, { waitUntil: "networkidle" });
+                // Anything drawn past the screen's edge (words out of a card, a row too wide), unless a box
+                // around it clips what it holds on purpose (a slideshow, a scrolling row).
+                const over = await page.evaluate(() => {
+                    const edge = document.documentElement.clientWidth;
+                    const clipped = (el) => {
+                        for (let at = el.parentElement; at && at !== document.body; at = at.parentElement) {
+                            const c = getComputedStyle(at);
+                            if (c.overflowX !== "visible")
+                                return true;
+                        }
+                        return false;
+                    };
+                    return [...document.querySelectorAll("body *")]
+                        .filter((el) => {
+                        const r = el.getBoundingClientRect();
+                        // Across the edge, not wholly off the screen (a field kept out of sight on purpose).
+                        return r.width > 0 && r.height > 0 && ((r.right > edge + 1 && r.left < edge) || (r.left < -1 && r.right > 0)) && !clipped(el);
+                    })
+                        .slice(0, 3)
+                        .map((el) => `${el.tagName.toLowerCase()}${el.className && typeof el.className === "string" ? `.${el.className.trim().split(/\s+/)[0]}` : ""} "${(el.textContent ?? "").trim().slice(0, 40)}"`);
+                });
+                if (over.length)
+                    problems.push(`${path} (${screen}, ${viewport.width}px): runs past the screen's edge: ${over.join(", ")}`);
+                if (!fullCheck)
+                    continue;
                 // Through the browser's devtools channel: the page's own policy (rightly) blocks an injected <script>.
                 await page.evaluate(axeSource);
                 const result = (await page.evaluate(() => 
@@ -75,7 +105,7 @@ export async function check(dir, o = {}) {
     if (problems.length)
         log(`✗ ${dir}: ${problems.length} problem${problems.length === 1 ? "" : "s"}${list(problems)}`);
     else
-        log(`✓ ${dir}: ${paths.length} pages, on a computer and a phone: nothing blocked or broken`);
+        log(`✓ ${dir}: ${paths.length} pages, on a computer and a phone: nothing blocked or broken, nothing past the screen's edge from a phone to a wide screen`);
     if (found.length)
         log(`${o.strict ? "✗" : "•"} ${dir}: accessibility, ${found.length} thing${found.length === 1 ? "" : "s"} to look at${o.strict ? "" : " (the site's to weigh; --strict fails on them)"}${list(found)}`);
     else

package/dist/content/index.d.ts

@@ -2,8 +2,9 @@ import type { ShareOptions } from "../share.ts";
 export type { CardNode, ShareCard, ShareFont, ShareOptions } from "../share.ts";
 import { z } from "zod";
 import { type Look, type LookOptions } from "./look.ts";
-export { contrast, lookCss, lookProblems, lookVars, type Look, type LookOptions } from "./look.ts";
-export { checkStructure, describePath, type StructureIssue } from "../schema.ts";
+export { COLOUR_ROLES, colourOf, contrast, HEADER_LAYOUTS, HEADER_STYLES, headerOf, isDark, KIT_FONTS, KIT_TYPE, lookCss, lookProblems, lookVars, swatchSlug, TYPE_ROLES, uploadedFontCss, buttonStyleClass, BUTTON_SIZES, MAX_BUTTON_STYLES, THEME_BUTTONS, type ButtonStyle, type ColourRole, type HeaderLayout, type HeaderLook, type HeaderStyle, type Look, type LookOptions, type Space, type Swatch, type TypeRole, type TypeScale, type TypeStyle, type UploadedFont, } from "./look.ts";
+export { fontFaceCss, fontFiles, googleFamily, googleFont, googleFonts, isFontName, servedAt, type FontFile, type FontKind, type GoogleFont } from "../fonts-google.ts";
+export { blockLabel, checkStructure, describePath, type StructureIssue } from "../schema.ts";
 export { z };
 export declare const text: z.ZodString;
 /** Longer plain text: drawn as a text area. */
@@ -22,6 +23,7 @@ export declare const link: z.ZodObject<{
     label: z.ZodString;
     href: z.ZodString;
     style: z.ZodOptional<z.ZodEnum<{
+        accent: "accent";
         primary: "primary";
         secondary: "secondary";
     }>>;
@@ -29,10 +31,15 @@ export declare const link: z.ZodObject<{
 export declare const time: z.ZodString;
 export declare const DAYS: readonly ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 /**
- * How a section sits on the page, for a site that offers it (defineSite's `placement`): its alignment,
- * width, spacing and the screens it shows on. The site's design says what each means at every width,
- * so a choice here stays sensible on a phone. CalOS shows it as the section's Layout. (A block's own
- * `layout`, a site's choice of how it's drawn, is a different thing and keeps its name.)
+ * How a section sits on the page, offered on every section (defineSite's `placement`, on unless a site
+ * turns it off): its alignment, width, spacing, the screens it shows on, and what's behind it. The
+ * site's design says what each means at every width, so a choice here stays sensible on a phone.
+ * CalOS shows it as the section's Layout. (A block's own `layout`, a site's choice of how it's drawn,
+ * is a different thing and keeps its name.)
+ *
+ * Its background is drawn by KitBlocks (../next/blocks.tsx) as a frame around the section: a colour
+ * (one of the page's, by its role, or one of the site's own, by its slug) and a photo, shaded so the
+ * words over it read.
  */
 export declare const placement: z.ZodObject<{
     align: z.ZodDefault<z.ZodEnum<{
@@ -41,8 +48,8 @@ export declare const placement: z.ZodObject<{
     }>>;
     width: z.ZodDefault<z.ZodEnum<{
         normal: "normal";
-        narrow: "narrow";
         wide: "wide";
+        narrow: "narrow";
     }>>;
     spacing: z.ZodDefault<z.ZodEnum<{
         normal: "normal";
@@ -54,12 +61,60 @@ export declare const placement: z.ZodObject<{
         all: "all";
         desktop: "desktop";
     }>>;
+    lines: z.ZodOptional<z.ZodEnum<{
+        both: "both";
+        none: "none";
+        top: "top";
+        bottom: "bottom";
+    }>>;
+    lineColour: z.ZodOptional<z.ZodEnum<{
+        quiet: "quiet";
+        strong: "strong";
+    }>>;
+    background: z.ZodOptional<z.ZodObject<{
+        color: z.ZodOptional<z.ZodString>;
+        photo: z.ZodOptional<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+        }, z.core.$strip>>;
+        overlay: z.ZodDefault<z.ZodEnum<{
+            dark: "dark";
+            light: "light";
+            none: "none";
+        }>>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export type Placement = z.output<typeof placement>;
-/** A section's placement as class names, only what differs from the usual: "place-align-center place-width-narrow", or "". */
+export type Background = NonNullable<Placement["background"]>;
+/** A section's placement as class names, only what differs from the usual: "place-align-center place-width-narrow", or "". Its background is the frame's (frameClass). */
 export declare function placementClass(block: {
     placement?: Partial<Placement>;
 }): string;
+/** The classes of the lines across a section's full width (KitBlocks wraps it in them), or "" for none. */
+export declare function linesClass(block: {
+    placement?: Partial<Placement>;
+}): string;
+/** Whether a section has something behind it (a colour or a photo), and so a frame. */
+export declare function hasBackground(block: {
+    placement?: Partial<Placement>;
+}): boolean;
+/**
+ * Whether a section's background is dark, so its words go light: under a photo, by its shade (dark
+ * or none: light words; light: dark words); else by its colour's value in the Look (`vars`, from
+ * lookVars, at build and in the preview alike). A colour it can't find counts as light.
+ */
+export declare function backgroundIsDark(block: {
+    placement?: Partial<Placement>;
+}, vars?: Record<string, string>): boolean;
+/**
+ * The classes of the frame KitBlocks draws around a section with a background, or "" for one
+ * without: `kit-frame`, its colour (`kit-bg-soft`, or `kit-bg-swatch-2` for the site's second own
+ * colour, found in `vars`), `kit-frame-photo kit-overlay-dark` under a photo, and `kit-frame-dark`
+ * when its words go light (backgroundIsDark). sections.css draws them from the Look's variables.
+ */
+export declare function frameClass(block: {
+    placement?: Partial<Placement>;
+}, vars?: Record<string, string>): string;
 /** The business's facts: the header, footer, hours, contact details and search data all come from here. */
 export declare const business: z.ZodObject<{
     name: z.ZodString;
@@ -137,16 +192,22 @@ export type Redirect = {
     status: 301 | 302;
 };
 /** What every site has, whatever its blocks. */
+/** A link in the menu; `children` (up to 8, one level) open under it: a dropdown on a wide screen, indented in a phone's menu. */
 export type MenuLink = {
     label: string;
     href: string;
     emphasis?: boolean;
+    children?: {
+        label: string;
+        href: string;
+    }[];
 };
 export type Menu = {
     links: MenuLink[];
     button?: {
         label: string;
         href: string;
+        style?: string;
     };
 };
 export type FooterLink = {
@@ -175,7 +236,7 @@ export type SiteBase = {
 };
 /**
  * The site's menu, as its header draws it: the one edited in CalOS (its links in order, one picked out,
- * and the header's button), else the pages that have a menu label, in page order (and no button: the
+ * each with the links under it if it has any, and the header's button), else the pages that have a menu label, in page order (and no button: the
  * site's own default).
  */
 export declare function menuOf(site: Pick<Site, "pages" | "menu">): Menu;
@@ -217,7 +278,7 @@ export type DefineOptions = {
     refine?: (site: Site, ctx: z.RefinementCtx) => void;
     /** How each page's share card looks (colours, fonts, a logo, or a card of the site's own); `false` for none (../share.ts). */
     share?: ShareOptions;
-    /** Every section gets a Layout (placement: alignment, width, spacing, screens), drawn by the site through placementClass. */
+    /** Every section gets a Layout (placement: alignment, width, spacing, screens, background), drawn by the site through placementClass and KitBlocks. On unless `false`. */
     placement?: boolean;
     /** The site's Look, chosen in CalOS (fonts from the ones it carries, colours, corners, buttons), drawn through CSS variables (./look.ts). */
     look?: LookOptions;
@@ -247,8 +308,95 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
             block: z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">;
         }, z.core.$strip>>>;
         look?: 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<{
+                    spread: "spread";
+                    centered: "centered";
+                    left: "left";
+                }>>;
+                menuShows: z.ZodDefault<z.ZodEnum<{
+                    both: "both";
+                    icon: "icon";
+                    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<{
+                display: z.ZodOptional<z.ZodObject<{
+                    size: z.ZodOptional<z.ZodNumber>;
+                    weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+                    tracking: z.ZodOptional<z.ZodNumber>;
+                    leading: z.ZodOptional<z.ZodNumber>;
+                }, z.core.$strip>>;
+                h1: z.ZodOptional<z.ZodObject<{
+                    size: z.ZodOptional<z.ZodNumber>;
+                    weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+                    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 | 500 | 600 | 700 | 300>>;
+                    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 | 500 | 600 | 700 | 300>>;
+                    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 | 500 | 600 | 700 | 300>>;
+                    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 | 500 | 600 | 700 | 300>>;
+                    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";
@@ -258,12 +406,31 @@ export declare function defineSite<const B extends Record<string, 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>> | undefined;
         url: z.ZodURL;
         lang: z.ZodDefault<z.ZodString>;
@@ -320,10 +487,15 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                 label: z.ZodString;
                 href: z.ZodString;
                 emphasis: z.ZodDefault<z.ZodBoolean>;
+                children: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                    label: z.ZodString;
+                    href: z.ZodString;
+                }, z.core.$strip>>>;
             }, z.core.$strip>>;
             button: z.ZodOptional<z.ZodObject<{
                 label: z.ZodString;
                 href: z.ZodString;
+                style: z.ZodOptional<z.ZodString>;
             }, z.core.$strip>>;
         }, z.core.$strip>>;
         footer: z.ZodOptional<z.ZodObject<{
@@ -368,8 +540,95 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                 block: z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">;
             }, z.core.$strip>>>;
             look?: 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<{
+                        spread: "spread";
+                        centered: "centered";
+                        left: "left";
+                    }>>;
+                    menuShows: z.ZodDefault<z.ZodEnum<{
+                        both: "both";
+                        icon: "icon";
+                        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<{
+                    display: z.ZodOptional<z.ZodObject<{
+                        size: z.ZodOptional<z.ZodNumber>;
+                        weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+                        tracking: z.ZodOptional<z.ZodNumber>;
+                        leading: z.ZodOptional<z.ZodNumber>;
+                    }, z.core.$strip>>;
+                    h1: z.ZodOptional<z.ZodObject<{
+                        size: z.ZodOptional<z.ZodNumber>;
+                        weight: z.ZodOptional<z.ZodLiteral<400 | 500 | 600 | 700 | 300>>;
+                        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 | 500 | 600 | 700 | 300>>;
+                        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 | 500 | 600 | 700 | 300>>;
+                        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 | 500 | 600 | 700 | 300>>;
+                        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 | 500 | 600 | 700 | 300>>;
+                        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";
@@ -379,12 +638,31 @@ export declare function defineSite<const B extends Record<string, 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>> | undefined;
             url: z.ZodURL;
             lang: z.ZodDefault<z.ZodString>;
@@ -441,10 +719,15 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                     label: z.ZodString;
                     href: z.ZodString;
                     emphasis: z.ZodDefault<z.ZodBoolean>;
+                    children: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                        label: z.ZodString;
+                        href: z.ZodString;
+                    }, z.core.$strip>>>;
                 }, z.core.$strip>>;
                 button: z.ZodOptional<z.ZodObject<{
                     label: z.ZodString;
                     href: z.ZodString;
+                    style: z.ZodOptional<z.ZodString>;
                 }, z.core.$strip>>;
             }, z.core.$strip>>;
             footer: z.ZodOptional<z.ZodObject<{
@@ -480,7 +763,11 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
     csp: Record<string, string[]>;
     share: ShareOptions | undefined;
     look: LookOptions | undefined;
-    /** The declaration CalOS draws its editing forms from. */
+    /**
+     * The declaration CalOS draws its editing forms from. A site with sections of the business's own
+     * (`own`) carries the ready-made ones it can start from, each one this site's schema takes, as
+     * `x-presets`: [{ key, name, description, block }].
+     */
     jsonSchema: () => Record<string, unknown>;
 };
 export type SiteDefinition = ReturnType<typeof defineSite>;