@caltho/site-kit 0.2.4 → 0.2.6

package/README.md

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

package/dist/cli/check.d.ts

@@ -1,4 +1,5 @@
 export declare function check(dir: string, o?: {
-    allow?: string[];
+    allow?: string[]; /** What axe finds fails the check too. */
+    strict?: boolean;
     log?: (line: string) => void;
 }): Promise<boolean>;

package/dist/cli/check.js

@@ -1,7 +1,9 @@
 // Checks a built site in a real browser before it's published: every page in its sitemap and the
-// 404 page, on a computer screen and a phone, with axe (WCAG 2.2 AA and best practice), and with
-// nothing blocked by the site's own content security policy or failing to load. Says what's wrong
-// and where; true when nothing is.
+// 404 page, on a computer screen and a phone, with nothing blocked by the site's own content
+// security policy or failing to load, and with axe (WCAG 2.2 AA and best practice). Something
+// broken fails the check. What axe finds is said, with where, but is the site's to weigh (a colour
+// the business chose over the contrast rule is their choice): it fails the check only with
+// `strict`. True when nothing is broken (and, strict, nothing is found).
 var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
     if (typeof path === "string" && /^\.\.?\//.test(path)) {
         return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
@@ -28,6 +30,7 @@ export async function check(dir, o = {}) {
     paths.push("/404.html");
     const server = await serve(dir, port);
     const problems = [];
+    const found = [];
     const browser = await chromium.launch(process.env.CHROMIUM_PATH ? { executablePath: process.env.CHROMIUM_PATH } : {}).catch((err) => {
         server.close();
         throw err;
@@ -58,7 +61,7 @@ export async function check(dir, o = {}) {
                 window.axe.run(document, { runOnly: { type: "tag", values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"] } })));
                 for (const v of result.violations.filter((x) => !allow.has(x.id))) {
                     const targets = v.nodes.slice(0, 3).map((n) => n.target.join(" "));
-                    problems.push(`${path} (${screen}): ${v.id}: ${v.help} [${v.impact}] at ${targets.join(", ")}${v.nodes.length > 3 ? ` and ${v.nodes.length - 3} more` : ""}`);
+                    found.push(`${path} (${screen}): ${v.id}: ${v.help} [${v.impact}] at ${targets.join(", ")}${v.nodes.length > 3 ? ` and ${v.nodes.length - 3} more` : ""}`);
                 }
             }
             await context.close();
@@ -68,10 +71,14 @@ export async function check(dir, o = {}) {
         await browser.close();
         server.close();
     }
-    if (problems.length) {
-        log(`✗ ${dir}: ${problems.length} problem${problems.length === 1 ? "" : "s"}\n  - ${[...new Set(problems)].join("\n  - ")}`);
-        return false;
-    }
-    log(`✓ ${dir}: ${paths.length} pages, on a computer and a phone: no accessibility problems axe can find${allow.size ? ` (except the ones allowed: ${[...allow].join(", ")})` : ""}, nothing blocked or broken`);
-    return true;
+    const list = (lines) => `\n  - ${[...new Set(lines)].join("\n  - ")}`;
+    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`);
+    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
+        log(`✓ ${dir}: no accessibility problems axe can find${allow.size ? ` (except the ones allowed: ${[...allow].join(", ")})` : ""}`);
+    return !problems.length && (!o.strict || !found.length);
 }

package/dist/cli/index.js

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

package/dist/content/index.d.ts

@@ -1,6 +1,8 @@
 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 { z };
 export declare const text: z.ZodString;
@@ -26,6 +28,38 @@ export declare const link: z.ZodObject<{
 }, z.core.$strip>;
 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.)
+ */
+export declare const placement: z.ZodObject<{
+    align: z.ZodDefault<z.ZodEnum<{
+        left: "left";
+        center: "center";
+    }>>;
+    width: z.ZodDefault<z.ZodEnum<{
+        normal: "normal";
+        narrow: "narrow";
+        wide: "wide";
+    }>>;
+    spacing: z.ZodDefault<z.ZodEnum<{
+        normal: "normal";
+        compact: "compact";
+        roomy: "roomy";
+    }>>;
+    show: z.ZodDefault<z.ZodEnum<{
+        phone: "phone";
+        all: "all";
+        desktop: "desktop";
+    }>>;
+}, 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 declare function placementClass(block: {
+    placement?: Partial<Placement>;
+}): 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;
@@ -134,6 +168,7 @@ export type SiteBase = {
     form?: string;
     menu?: Menu;
     footer?: Footer;
+    look?: Look;
     redirects: Redirect[]; /** Whether page paths end in a slash (the default). */
     trailingSlash?: boolean;
 };
@@ -159,6 +194,7 @@ export type BlocksOf<B extends Record<string, z.ZodObject>> = {
     [K in keyof B & string]: z.output<B[K]> & {
         type: K;
         id?: string;
+        placement?: Placement;
     };
 }[keyof B & string];
 /** A site's content with its own blocks typed: `ContentOf<typeof blocks> & { headerAction?: Link }`. */
@@ -180,6 +216,10 @@ 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. */
+    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;
 };
 /**
  * A site's content shape from its blocks: each a name and the fields it has. The site's own block
@@ -201,6 +241,25 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
             shareText: z.ZodOptional<z.ZodString>;
             noindex: z.ZodDefault<z.ZodBoolean>;
         }, z.core.$strip>>;
+        look?: z.ZodOptional<z.ZodObject<{
+            brand: z.ZodDefault<z.ZodString>;
+            accent: z.ZodDefault<z.ZodString>;
+            corners: z.ZodDefault<z.ZodEnum<{
+                square: "square";
+                soft: "soft";
+                round: "round";
+            }>>;
+            buttons: z.ZodDefault<z.ZodEnum<{
+                solid: "solid";
+                outline: "outline";
+            }>>;
+            headingFont?: z.ZodDefault<z.ZodEnum<{
+                [x: string]: string;
+            }>> | undefined;
+            bodyFont?: z.ZodDefault<z.ZodEnum<{
+                [x: string]: string;
+            }>> | undefined;
+        }, z.core.$strip>> | undefined;
         url: z.ZodURL;
         lang: z.ZodDefault<z.ZodString>;
         business: z.ZodObject<{
@@ -299,6 +358,25 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                 shareText: z.ZodOptional<z.ZodString>;
                 noindex: z.ZodDefault<z.ZodBoolean>;
             }, z.core.$strip>>;
+            look?: z.ZodOptional<z.ZodObject<{
+                brand: z.ZodDefault<z.ZodString>;
+                accent: z.ZodDefault<z.ZodString>;
+                corners: z.ZodDefault<z.ZodEnum<{
+                    square: "square";
+                    soft: "soft";
+                    round: "round";
+                }>>;
+                buttons: z.ZodDefault<z.ZodEnum<{
+                    solid: "solid";
+                    outline: "outline";
+                }>>;
+                headingFont?: z.ZodDefault<z.ZodEnum<{
+                    [x: string]: string;
+                }>> | undefined;
+                bodyFont?: z.ZodDefault<z.ZodEnum<{
+                    [x: string]: string;
+                }>> | undefined;
+            }, z.core.$strip>> | undefined;
             url: z.ZodURL;
             lang: z.ZodDefault<z.ZodString>;
             business: z.ZodObject<{
@@ -392,6 +470,7 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
     trailingSlash: boolean;
     csp: Record<string, string[]>;
     share: ShareOptions | undefined;
+    look: LookOptions | undefined;
     /** The declaration CalOS draws its editing forms from. */
     jsonSchema: () => Record<string, unknown>;
 };

package/dist/content/index.js

@@ -10,6 +10,8 @@
 // them with no further work.
 import { z } from "zod";
 import { checkStructure, describePath } from "../schema.js";
+import { lookProblems, lookSchema } from "./look.js";
+export { contrast, lookCss, lookProblems, lookVars } from "./look.js";
 export { checkStructure, describePath } from "../schema.js";
 export { z };
 // Fields carry an "x-ui" hint in the JSON Schema, so CalOS draws the right control: a text area, a
@@ -36,6 +38,29 @@ export const time = z.string().regex(/^([01]\d|2[0-3]):[0-5]\d$/, { error: "A ti
 export const DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 /** What every block has: a place on the page, for links like /#contact. */
 const blockBase = { id: z.string().regex(/^[a-z][\w-]*$/).optional() };
+/**
+ * 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.)
+ */
+export const placement = z
+    .object({
+    align: z.enum(["left", "center"]).default("left").meta({ title: "Alignment" }),
+    width: z.enum(["narrow", "normal", "wide"]).default("normal").meta({ title: "Width" }),
+    spacing: z.enum(["compact", "normal", "roomy"]).default("normal").meta({ title: "Spacing" }),
+    show: z.enum(["all", "desktop", "phone"]).default("all").meta({ title: "Show on" }),
+})
+    .meta({ title: "Layout" });
+/** A section's placement as class names, only what differs from the usual: "place-align-center place-width-narrow", or "". */
+export function placementClass(block) {
+    const l = block.placement ?? {};
+    const usual = { align: "left", width: "normal", spacing: "normal", show: "all" };
+    return Object.keys(usual)
+        .filter((k) => l[k] && l[k] !== usual[k])
+        .map((k) => `place-${k}-${l[k]}`)
+        .join(" ");
+}
 const address = z.object({
     street: text,
     locality: text,
@@ -111,7 +136,7 @@ export function defineSite(blocks, o = {}) {
     const union = z.discriminatedUnion("type", 
     // Each kind keeps what the site said of it (its title, for CalOS to call it by).
     names.map((type) => {
-        const kind = z.object({ type: z.literal(type), ...blockBase }).extend(blocks[type].shape);
+        const kind = z.object({ type: z.literal(type), ...blockBase, ...(o.placement ? { placement: placement.optional() } : {}) }).extend(blocks[type].shape);
         const meta = blocks[type].meta();
         return meta ? kind.meta(meta) : kind;
     }));
@@ -124,7 +149,7 @@ export function defineSite(blocks, o = {}) {
         lang: z.string().default("en-US").meta({ title: "Language" }),
         business,
         /** Where the contact forms post to, if the site has any (a CalOS form's address, or another service's). */
-        form: z.url({ protocol: /^https?$/ }).meta({ title: "Where its forms send" }).optional(),
+        form: z.url({ protocol: /^https?$/ }).meta({ title: "Where its forms send", "x-ui": "form" }).optional(),
         /** The header's links in order, and its button: edited as one list in CalOS. Left out, the pages' menu labels are used. */
         menu: z
             .object({
@@ -144,6 +169,7 @@ export function defineSite(blocks, o = {}) {
             .meta({ title: "Footer" }),
         /** Old addresses kept answering, when CalOS doesn't supply them at build. */
         redirects: z.array(z.object({ from: z.string().startsWith("/"), to: href, status: z.union([z.literal(301), z.literal(302)]).default(301) })).default([]),
+        ...(o.look ? { look: lookSchema(o.look) } : {}),
         ...o.extend,
         pages: z.array(page).min(1),
     })
@@ -151,6 +177,9 @@ export function defineSite(blocks, o = {}) {
         const s = site;
         for (const i of checkStructure(s))
             ctx.addIssue({ code: "custom", path: i.path, message: i.message });
+        if (o.look)
+            for (const i of lookProblems(s.look, o.look))
+                ctx.addIssue({ code: "custom", path: i.path, message: i.message });
         o.refine?.(s, ctx);
     });
     return {
@@ -165,6 +194,7 @@ export function defineSite(blocks, o = {}) {
         trailingSlash,
         csp: o.csp ?? {},
         share: o.share,
+        look: o.look,
         /** The declaration CalOS draws its editing forms from. */
         jsonSchema: () => z.toJSONSchema(schema, { io: "input", unrepresentable: "any" }),
     };

package/dist/content/look.d.ts

@@ -0,0 +1,59 @@
+import { z } from "zod";
+export type LookOptions = {
+    /** The fonts the site carries, by the name CalOS shows → the font-family it's drawn with. */
+    fonts?: Record<string, string>;
+    /** Which of them the site's headings and text are in, until others are chosen; else the first. */
+    headingFont?: string;
+    bodyFont?: string;
+    /** 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. */
+    background?: string;
+    corners?: Corners;
+    buttons?: Buttons;
+};
+declare const CORNERS: readonly ["square", "soft", "round"];
+declare const BUTTONS: readonly ["solid", "outline"];
+type Corners = (typeof CORNERS)[number];
+type Buttons = (typeof BUTTONS)[number];
+/** The Look's fields, for the site's content. */
+export declare function lookSchema(o: LookOptions): z.ZodOptional<z.ZodObject<{
+    brand: z.ZodDefault<z.ZodString>;
+    accent: z.ZodDefault<z.ZodString>;
+    corners: z.ZodDefault<z.ZodEnum<{
+        square: "square";
+        soft: "soft";
+        round: "round";
+    }>>;
+    buttons: z.ZodDefault<z.ZodEnum<{
+        solid: "solid";
+        outline: "outline";
+    }>>;
+    headingFont?: z.ZodDefault<z.ZodEnum<{
+        [x: string]: string;
+    }>> | undefined;
+    bodyFont?: z.ZodDefault<z.ZodEnum<{
+        [x: string]: string;
+    }>> | undefined;
+}, z.core.$strip>>;
+export type Look = {
+    headingFont?: string;
+    bodyFont?: string;
+    brand?: string;
+    accent?: string;
+    corners?: Corners;
+    buttons?: Buttons;
+};
+/** 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. */
+export declare function lookProblems(look: Look | undefined, o: LookOptions): {
+    path: string[];
+    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;
+export {};

package/dist/content/look.js

@@ -0,0 +1,87 @@
+// A site's Look, chosen in CalOS: its fonts (from the ones the site carries), its brand and accent
+// colours, its corners and its buttons. The site says what may be chosen and its own defaults
+// (defineSite's `look`); what's chosen reaches its CSS as variables, which its design reads:
+//
+//   --look-heading-font, --look-body-font   font-family stacks
+//   --look-brand, --look-on-brand           the brand colour, and the text that reads on it
+//   --look-accent                           the accent colour
+//   --look-radius, --look-button-radius     corners: of cards and pictures, and of buttons
+//   --look-button-bg, --look-button-fg, --look-button-border
+//   --look-button-fill                      1 filled, 0 outlined
+//
+// Published, they're a <style> in the page (LookStyle, allowed by its hash); in CalOS's preview they're
+// set on the page as the draft changes (allowed: a style set from script isn't a style attribute).
+import { z } from "zod";
+const CORNERS = ["square", "soft", "round"];
+const BUTTONS = ["solid", "outline"];
+const HEX = /^#[0-9a-f]{6}$/i;
+const color = z.string().regex(HEX, { error: "A colour like #2b5f8a" }).meta({ "x-ui": "color", "x-error": "A colour like #2b5f8a" });
+/** The Look's fields, for the site's content. */
+export function lookSchema(o) {
+    const fonts = Object.keys(o.fonts ?? {});
+    // Each starts as the site's own, so CalOS shows what the site looks like now.
+    const font = (title, own) => z.enum(fonts).default(own && fonts.includes(own) ? own : fonts[0]).meta({ title });
+    return z
+        .object({
+        ...(fonts.length ? { headingFont: font("Heading font", o.headingFont), bodyFont: font("Text font", o.bodyFont) } : {}),
+        brand: color.default(o.brand).meta({ title: "Brand colour" }),
+        accent: color.default(o.accent ?? o.brand).meta({ title: "Accent colour" }),
+        corners: z.enum(CORNERS).default(o.corners ?? "soft").meta({ title: "Corners" }),
+        buttons: z.enum(BUTTONS).default(o.buttons ?? "solid").meta({ title: "Buttons" }),
+    })
+        .optional()
+        .meta({ title: "Look" });
+}
+/** How readable one colour is on another (WCAG): 1 to 21. */
+export function contrast(a, b) {
+    const lum = (hex) => {
+        const [r, g, bl] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+        return 0.2126 * r + 0.7152 * g + 0.0722 * bl;
+    };
+    const [x, y] = [lum(a), lum(b)].sort((m, n) => n - m);
+    return (x + 0.05) / (y + 0.05);
+}
+/** 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. */
+export function lookProblems(look, o) {
+    const bg = o.background ?? "#ffffff";
+    if (look?.brand && HEX.test(look.brand) && HEX.test(bg) && contrast(look.brand, bg) < 3)
+        return [{ path: ["look", "brand"], message: "Too close to the page's background to read: choose a darker or stronger colour" }];
+    return [];
+}
+const RADIUS = { square: ["0", "0"], soft: ["8px", "8px"], round: ["16px", "999px"] };
+/** The Look as CSS variables: what's chosen, else the site's own. */
+export function lookVars(look, o) {
+    const l = look ?? {};
+    const fonts = o.fonts ?? {};
+    const first = Object.values(fonts)[0];
+    const own = (name) => (name && fonts[name]) || first;
+    const brand = l.brand && HEX.test(l.brand) ? l.brand : o.brand;
+    const onBrand = HEX.test(brand) && contrast(brand, "#ffffff") >= contrast(brand, "#111111") ? "#ffffff" : "#111111";
+    const [radius, buttonRadius] = RADIUS[l.corners ?? o.corners ?? "soft"];
+    const outline = (l.buttons ?? o.buttons ?? "solid") === "outline";
+    const vars = {
+        "--look-brand": brand,
+        "--look-on-brand": onBrand,
+        "--look-accent": (l.accent && HEX.test(l.accent) ? l.accent : o.accent) ?? brand,
+        "--look-radius": radius,
+        "--look-button-radius": buttonRadius,
+        "--look-button-bg": outline ? "transparent" : brand,
+        "--look-button-fg": outline ? brand : onBrand,
+        "--look-button-border": brand,
+        /** 1 for a filled button, 0 for an outlined one: for a design that mixes its own colours by it. */
+        "--look-button-fill": outline ? "0" : "1",
+    };
+    const heading = (l.headingFont && fonts[l.headingFont]) || own(o.headingFont);
+    const body = (l.bodyFont && fonts[l.bodyFont]) || own(o.bodyFont);
+    if (heading)
+        vars["--look-heading-font"] = heading;
+    if (body)
+        vars["--look-body-font"] = body;
+    return vars;
+}
+/** The Look as a stylesheet for the page's head: `:root { … }`. */
+export function lookCss(look, o) {
+    return `:root{${Object.entries(lookVars(look, o))
+        .map(([k, v]) => `${k}:${v.replace(/[<>{};]/g, "")}`)
+        .join(";")}}`;
+}

package/dist/next/index.d.ts

@@ -2,4 +2,5 @@ export { image, pageAt, prepared, site } from "./data.ts";
 export { JsonLd } from "./JsonLd.tsx";
 export { pageMetadata, robots, sitemap, staticParams } from "./metadata.ts";
 export { Img, type Ratio } from "./parts/Img.tsx";
+export { LookStyle } from "./parts/LookStyle.tsx";
 export { Md } from "./parts/Md.tsx";

package/dist/next/index.js

@@ -5,4 +5,5 @@ export { image, pageAt, prepared, site } from "./data.js";
 export { JsonLd } from "./JsonLd.js";
 export { pageMetadata, robots, sitemap, staticParams } from "./metadata.js";
 export { Img } from "./parts/Img.js";
+export { LookStyle } from "./parts/LookStyle.js";
 export { Md } from "./parts/Md.js";

package/dist/next/parts/LookStyle.d.ts

@@ -0,0 +1,5 @@
+import { type LookOptions } from "../../content/look.ts";
+/** The site's Look as CSS variables, for its layout's <head> (content/look.ts). */
+export declare function LookStyle({ look }: {
+    look: LookOptions;
+}): import("react").JSX.Element;

package/dist/next/parts/LookStyle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lookCss } from "../../content/look.js";
+import { prepared } from "../data.js";
+/** The site's Look as CSS variables, for its layout's <head> (content/look.ts). */
+export function LookStyle({ look }) {
+    return _jsx("style", { dangerouslySetInnerHTML: { __html: lookCss(prepared().site.look, look) } });
+}

package/dist/next/preview.d.ts

@@ -1,6 +1,9 @@
 import { type ReactNode } from "react";
 import type { Page, Site } from "../content/index.ts";
-export declare function SitePreview({ origins, render }: {
+import { type LookOptions } from "../content/look.ts";
+/** `look`: the same Look options the site's defineSite has, for the draft's Look to be drawn as it's chosen. */
+export declare function SitePreview({ origins, render, look }: {
     origins: string[];
     render: (page: Page, site: Site) => ReactNode;
+    look?: LookOptions;
 }): import("react").JSX.Element | null;

package/dist/next/preview.js

@@ -7,12 +7,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // them: its caltho.app address and its own domain, from the build) are listened to.
 //
 // CalOS → page: { type: "calos:show", site, images, path, selected?, scroll?, labels? }
-// page → CalOS: { type: "calos:ready" }, { type: "calos:pick", path, block }, { type: "calos:go", path },
+// page → CalOS: { type: "calos:ready" }, { type: "calos:pick", path, block },
 //               { type: "calos:error", message }
 import { Component, useEffect, useRef, useState } from "react";
+import { lookVars } from "../content/look.js";
 import { BUILT_IMAGES, fieldForImage, fieldForText } from "../preview-match.js";
 import { setPrepared } from "./data.js";
-export function SitePreview({ origins, render }) {
+/** `look`: the same Look options the site's defineSite has, for the draft's Look to be drawn as it's chosen. */
+export function SitePreview({ origins, render, look }) {
     const [shown, setShown] = useState(null);
     const [round, setRound] = useState(0);
     const latest = useRef(null);
@@ -66,14 +68,7 @@ export function SitePreview({ origins, render }) {
                 return;
             e.preventDefault();
             e.stopPropagation();
-            const main = document.querySelector("main");
-            const link = target.closest("a");
-            if (link && !main?.contains(link)) {
-                const to = internalPath(link.getAttribute("href"), m.site);
-                if (to)
-                    post({ type: "calos:go", path: to });
-                return;
-            }
+            // A link anywhere (a section's, the menu's, the footer's) is edited, never followed: CalOS's page picker moves between pages.
             // A picture under the pointer counts, even when something over it (a frame, a caption's box) took the click.
             const under = document.elementsFromPoint(e.clientX, e.clientY).find((el) => el.tagName === "IMG") ?? target;
             post({ type: "calos:pick", ...pick(under, m, wordsAt(e.clientX, e.clientY)) });
@@ -138,6 +133,13 @@ export function SitePreview({ origins, render }) {
             window.removeEventListener("resize", keep);
         };
     }, [shown, round]);
+    // The draft's Look, set on the page (LookStyle drew the published one into the build).
+    useEffect(() => {
+        if (!shown || !look)
+            return;
+        for (const [k, v] of Object.entries(lookVars(shown.site.look, look)))
+            document.documentElement.style.setProperty(k, v);
+    }, [shown, look]);
     if (!shown)
         return null;
     const page = shown.site.pages.find((p) => p.path === shown.path) ?? shown.site.pages[0];
@@ -169,17 +171,6 @@ function asBuilt(images) {
     }
     return out;
 }
-/** A path on this site from a link's address, as the content writes it; null for anywhere else. */
-function internalPath(href, site) {
-    if (!href || href.startsWith("#") || /^(mailto|tel):/.test(href))
-        return null;
-    const url = new URL(href, location.href);
-    if (url.origin !== location.origin && url.origin !== new URL(site.url).origin)
-        return null;
-    const bare = url.pathname.replace(/\/$/, "") || "/";
-    const withSlash = bare === "/" ? "/" : `${bare}/`;
-    return site.pages.some((p) => p.path === bare) ? bare : site.pages.some((p) => p.path === withSlash) ? withSlash : null;
-}
 const pageIndex = (m) => m.site.pages.findIndex((p) => p.path === m.path);
 /** What's in `main` without being drawn: a page's structured data (JSON-LD) and the like. */
 const UNDRAWN = new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT", "LINK", "META"]);
@@ -226,7 +217,9 @@ function pick(target, m, words = null) {
             return { path: found, block: blockOf(found) ?? block };
     }
     if (words) {
-        const exact = (scope && fieldForText(scope, block, words, false)) ?? fieldForText(shared, [], words, false) ?? fieldForText(pageOwn, ["pages", pi], words, false);
+        // Outside a section, a menu made from the pages' menu labels is any page's label.
+        const labels = { pages: m.site.pages.map((p) => ({ menu: p.menu })) };
+        const exact = (scope && fieldForText(scope, block, words, false)) ?? fieldForText(shared, [], words, false) ?? fieldForText(pageOwn, ["pages", pi], words, false) ?? (n < 0 ? fieldForText(labels, [], words, false) : null);
         if (exact)
             return { path: exact, block: blockOf(exact) ?? block };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caltho/site-kit",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "What every Caltho site is built with: the contract with CalOS (content, and how a site declares what is editable), images, search and security, and the checks",
   "license": "MIT",
   "type": "module",