@caltho/site-kit 0.2.9 → 0.2.11

package/dist/migrate.js

@@ -0,0 +1,284 @@
+// Moving a site's own code to what a new kit expects, as text: CalOS reads a site's files from its
+// repository, runs the migrations it hasn't had, and commits what they change on the kit update's
+// branch, never main, so Cloudflare builds it as a preview first and it goes live only once that built.
+// Nothing here runs the site's code, and a migration changes a file only where it's exactly the
+// starter's (a known version, or a known block within it): a file the site has made its own is
+// left as it is and the migration reported for a person, who moves it by hand. What a site has had
+// is kept in its repository (.caltho/migrations.json), so each runs once.
+export const MIGRATIONS_FILE = ".caltho/migrations.json";
+async function sha256(text) {
+    const bytes = new Uint8Array(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(text)));
+    return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+// The starter's own header, footer and menu group, every version it has shipped.
+const STARTER_FRAME_FILES = {
+    "components/Header.tsx": [
+        "0bf8abc156b59a5e6302921a7b0a16d4d391f519ee595de61e039aeb4b92ac92",
+        "4b101f874022fe290f659dd519849cc89b79c68791e8bc92386ae86718902bf5",
+        "e4ff7a7f332919c3611bf55f1fe7a29877b24445d164ab99f2875121af3895b9",
+    ],
+    "components/Footer.tsx": ["7971cfd0c2bdf4cef2a69871869dcc90c678bd272d43ce0ac6c8adf45ee8cf54", "88d6efc19fe636fe8c517faa303b4e05ede779942c2d07a3c551011d969873b4"],
+    "components/MenuGroup.tsx": ["4f2e53fbd9bc5fdf3c9e033e28f4e6582470a70a4e05ac51270a233a05345aa8"],
+};
+const OLD_FRAME = `export function Frame({ site, current, children }: { site: Content; current: string; children: ReactNode }) {
+  return (
+    <>
+      <a className="skip" href="#main">
+        Skip to content
+      </a>
+      <Header site={site} current={current} />
+      <main id="main" tabIndex={-1}>
+        {children}
+      </main>
+      <Footer site={site} />
+    </>
+  );
+}`;
+const NEW_FRAME = `/**
+ * The frame around every page: the kit's (skip link, header, footer), so a new header or footer
+ * option reaches this site with a kit release. A site with a header of its own passes it:
+ * <KitFrame header={<MyHeader … />}>, and leaves \`header\` out of content/look.ts unless it follows
+ * the Look's Header (headerOf).
+ */
+export function Frame({ site, current, children }: { site: Content; current: string; children: ReactNode }) {
+  return (
+    <KitFrame site={site} current={current} look={look}>
+      {children}
+    </KitFrame>
+  );
+}`;
+/**
+ * The starter's header and footer become the kit's (KitFrame), which follow the Look's Header, so
+ * the site's look.ts lists one and CalOS offers its options. The starter's footer was its Slate:
+ * kept, where the site's CSS has --dark. The old header and footer CSS is left, unused.
+ */
+/** The starter's design, told to the kit's frame: its dark footer and its words on it, and its buttons' weight. */
+const FRAME_CSS = `/* The kit draws the header and footer (KitFrame): in this design's dark, its buttons as its own. */
+:root {
+  --kit-footer-bg: var(--dark);
+  --kit-footer-fg: var(--on-dark);
+  --kit-footer-muted: var(--muted-on-dark);
+  --kit-footer-line: var(--line-on-dark);
+  --kit-button-weight: var(--b-weight);
+}
+`;
+const kitFrame = {
+    id: "kit-frame",
+    since: "0.2.11",
+    title: "The header and footer are the kit's (KitFrame), so new header and footer options reach this site with kit releases",
+    async run(read) {
+        const page = await read("components/SitePage.tsx");
+        if (!page)
+            return { manual: "it has no components/SitePage.tsx: its pages are drawn its own way" };
+        if (page.includes("KitFrame"))
+            return { done: true };
+        if (!page.includes(OLD_FRAME))
+            return { manual: "its components/SitePage.tsx draws the frame its own way (not the starter's Frame)" };
+        for (const [path, known] of Object.entries(STARTER_FRAME_FILES)) {
+            const text = await read(path);
+            if (text !== null && !known.includes(await sha256(text)))
+                return { manual: `its ${path} is its own, not the starter's` };
+        }
+        const look = await read("content/look.ts");
+        if (!look || !/export const look: LookOptions = \{[\s\S]*\n\};\s*$/.test(look))
+            return { manual: "its content/look.ts isn't the starter's shape" };
+        const imports = /import \{([^}]*)\} from "@caltho\/site-kit\/next";/;
+        const m = page.match(imports);
+        if (!m)
+            return { manual: "its components/SitePage.tsx doesn't import from @caltho/site-kit/next" };
+        const names = [...new Set([...m[1].split(",").map((x) => x.trim()).filter(Boolean), "KitFrame"])].sort((a, b) => a.localeCompare(b));
+        let nextPage = page
+            .replace(OLD_FRAME, NEW_FRAME)
+            .replace(imports, `import { ${names.join(", ")} } from "@caltho/site-kit/next";`)
+            .replace('import { Footer } from "./Footer";\n', "")
+            .replace('import { Header } from "./Header";\n', "");
+        if (!nextPage.includes('from "@/content/look"'))
+            nextPage = nextPage.replace(imports, (line) => `${line}\nimport { look } from "@/content/look";`);
+        const files = [{ path: "components/SitePage.tsx", text: nextPage }];
+        if (!/^\s*header:/m.test(look)) {
+            files.push({
+                path: "content/look.ts",
+                text: look.replace(/\n\};\s*$/, `\n  /** The kit's header (KitFrame) follows the Look's Header, so CalOS offers its options: sticky, with a line under it, name left and menu right to start. */\n  header: { sticky: true, style: "line", layout: "spread" },\n};\n`),
+            });
+        }
+        const css = await read("app/globals.css");
+        if (css && /--dark\s*:/.test(css) && !css.includes("--kit-footer-bg")) {
+            files.push({ path: "app/globals.css", text: `${css.replace(/\s*$/, "")}\n\n${FRAME_CSS}` });
+        }
+        for (const path of Object.keys(STARTER_FRAME_FILES))
+            if ((await read(path)) !== null)
+                files.push({ path, remove: true });
+        return { files };
+    },
+};
+const ACCENT_CSS = `/* The accent colour: a button that stands out on a photo or a dark band (an action's style "accent"). */
+.btn-accent {
+  background: var(--look-accent, var(--accent));
+  border-color: var(--look-accent, var(--accent));
+  color: var(--look-on-accent, var(--ink));
+}
+.btn-accent:hover {
+  background: color-mix(in srgb, var(--look-accent, var(--accent)) 88%, #000000);
+}
+`;
+/**
+ * Actions may be in the accent colour (style "accent"), which the starter's design draws as
+ * .btn-accent: added to a site whose CSS has the starter's buttons (.btn-primary) and none yet.
+ */
+const accentButtons = {
+    id: "accent-buttons",
+    since: "0.2.11",
+    title: "Buttons in the accent colour: an action's style can be the accent, for one that stands out on a photo or a dark band",
+    async run(read) {
+        const css = await read("app/globals.css");
+        if (!css)
+            return { manual: "it has no app/globals.css" };
+        if (css.includes(".btn-accent"))
+            return { done: true };
+        if (!css.includes(".btn-primary {"))
+            return { manual: "its buttons aren't the starter's (.btn-primary): it draws an accent button its own way" };
+        return { files: [{ path: "app/globals.css", text: `${css.replace(/\s*$/, "")}\n\n${ACCENT_CSS}` }] };
+    },
+};
+/** The starter's dark, a palette colour the business may remove (Cal does, building from a picture). */
+const STARTER_DARK = "--dark:var(--look-swatch-slate, #1d2a33);";
+/**
+ * The design's dark (its dark sections and the footer) following the theme when the business has
+ * taken its Slate away: the theme's own dark (the darker of its page and text), not a navy no
+ * colour in the theme shows.
+ */
+const darkFollowsLook = {
+    id: "dark-follows-look",
+    since: "0.2.11",
+    title: "The design's dark follows the theme: with its Slate colour removed, dark sections and the footer take the theme's own dark, not a hidden navy",
+    async run(read) {
+        const css = await read("app/globals.css");
+        if (!css)
+            return { manual: "it has no app/globals.css" };
+        if (css.includes("--dark:var(--look-swatch-slate, var(--look-dark"))
+            return { done: true };
+        if (!css.includes(STARTER_DARK))
+            return { manual: "its dark isn't the starter's (--dark from Slate): it draws its dark its own way" };
+        return { files: [{ path: "app/globals.css", text: css.replace(STARTER_DARK, "--dark:var(--look-swatch-slate, var(--look-dark, #1d2a33));") }] };
+    },
+};
+/** The starter's buttons' border, before and after it reads the Look's button border (width and colour). */
+const BUTTON_BORDER = [
+    ["  border: 2px solid transparent;\n  border-radius: var(--radius-button);", "  border: var(--look-button-border-width, 2px) solid transparent;\n  border-radius: var(--radius-button);"],
+    ["  border-color: color-mix(in srgb, var(--brand-fill) var(--fill), var(--c-link));", "  border-color: var(--look-button-border-colour, color-mix(in srgb, var(--brand-fill) var(--fill), var(--c-link)));"],
+    ["  border-color: var(--look-accent, var(--accent));\n  color: var(--look-on-accent, var(--ink));", "  border-color: var(--look-button-border-colour, var(--look-accent, var(--accent)));\n  color: var(--look-on-accent, var(--ink));"],
+    ["  border-color: var(--on-brand);\n  color: color-mix(in srgb, var(--brand-fill) var(--fill), var(--on-brand));", "  border-color: var(--look-button-border-colour, var(--on-brand));\n  color: color-mix(in srgb, var(--brand-fill) var(--fill), var(--on-brand));"],
+];
+/**
+ * Buttons with the Look's border: its width and colour, where the business chooses one (a dark
+ * outline on a yellow button). Every line the starter's, or it's left for a person.
+ */
+const buttonBorders = {
+    id: "button-borders",
+    since: "0.2.11",
+    title: "Button borders: the Look's button border (its width and colour) on the site's buttons",
+    async run(read) {
+        const css = await read("app/globals.css");
+        if (!css)
+            return { manual: "it has no app/globals.css" };
+        if (css.includes("--look-button-border-width"))
+            return { done: true };
+        if (!BUTTON_BORDER.every(([from]) => css.includes(from)))
+            return { manual: "its buttons aren't the starter's: it draws their borders its own way" };
+        return { files: [{ path: "app/globals.css", text: BUTTON_BORDER.reduce((t, [from, to]) => t.replace(from, to), css) }] };
+    },
+};
+/** The starter's own font imports, which the kit's fonts.css takes the place of. */
+const STARTER_FONT_IMPORTS = /^import "@fontsource\/(fraunces|inter)\/latin-\d+\.css";\n/gm;
+const STARTER_FONTS_LINE = `  fonts: { Inter: '"Inter", system-ui, Arial, sans-serif', Fraunces: '"Fraunces", Georgia, serif' },`;
+/**
+ * The kit's fonts (fonts.css: ten variable families, every weight) in place of the starter's two
+ * fixed-weight ones, and listed in the site's look so the business can pick any of them. Where the
+ * site loads fonts of its own, or lists its own, it's left for a person.
+ */
+const kitFonts = {
+    id: "kit-fonts",
+    since: "0.2.11",
+    title: "The kit's fonts: ten variable families with every weight, any of them a choice in the site's Look",
+    async run(read) {
+        const layout = await read("app/layout.tsx");
+        const look = await read("content/look.ts");
+        if (!layout || !look)
+            return { manual: "it has no app/layout.tsx or content/look.ts like the starter's" };
+        if (layout.includes("@caltho/site-kit/fonts.css"))
+            return { done: true };
+        const own = layout.match(/^import "@fontsource[^"]*";$/gm) ?? [];
+        if (!own.length || own.some((l) => !/^import "@fontsource\/(fraunces|inter)\/latin-\d+\.css";$/.test(l)))
+            return { manual: "its app/layout.tsx loads fonts of its own" };
+        if (!look.includes(STARTER_FONTS_LINE))
+            return { manual: "its content/look.ts lists fonts of its own" };
+        const nextLayout = layout.replace(STARTER_FONT_IMPORTS, "").replace('import "@caltho/site-kit/sections.css";', 'import "@caltho/site-kit/sections.css";\nimport "@caltho/site-kit/fonts.css";');
+        if (!nextLayout.includes("@caltho/site-kit/fonts.css"))
+            return { manual: "its app/layout.tsx doesn't import the kit's sections.css, where the fonts go beside it" };
+        const files = [
+            { path: "app/layout.tsx", text: nextLayout },
+            {
+                path: "content/look.ts",
+                text: look
+                    .replace(STARTER_FONTS_LINE, "  fonts: KIT_FONTS,")
+                    .replace('import type { LookOptions } from "@caltho/site-kit/content";', 'import { KIT_FONTS, type LookOptions } from "@caltho/site-kit/content";'),
+            },
+        ];
+        const css = await read("app/globals.css");
+        if (css)
+            files.push({ path: "app/globals.css", text: css.replace('--font-body: "Inter";', '--font-body: "Inter Variable";').replace('--font-display: "Fraunces";', '--font-display: "Fraunces Variable";') });
+        const pkg = await read("package.json");
+        if (pkg)
+            files.push({ path: "package.json", text: pkg.replace(/^\s*"@fontsource\/(fraunces|inter)": "[^"]*",\n/gm, "") });
+        return { files };
+    },
+};
+/** Every migration, oldest first. */
+export const MIGRATIONS = [kitFrame, accentButtons, kitFonts, darkFollowsLook, buttonBorders];
+const parts = (v) => v.split(".").map(Number);
+function atLeast(v, min) {
+    const [a, b] = [parts(v), parts(min)];
+    for (let i = 0; i < 3; i++)
+        if ((a[i] ?? 0) !== (b[i] ?? 0))
+            return (a[i] ?? 0) > (b[i] ?? 0);
+    return true;
+}
+/**
+ * What moving a site to kit `version` changes in its own files: each migration up to that version it
+ * hasn't had, in order, each seeing the files as the ones before it left them.
+ */
+export async function migrateSite(read, version, migrations = MIGRATIONS) {
+    const recorded = await read(MIGRATIONS_FILE);
+    let had = [];
+    try {
+        const parsed = recorded ? JSON.parse(recorded) : null;
+        if (Array.isArray(parsed?.applied))
+            had = parsed.applied.filter((x) => typeof x === "string");
+    }
+    catch {
+        // An unreadable record: as if none, each migration checking the files for itself.
+    }
+    const changed = new Map();
+    const view = async (path) => {
+        const c = changed.get(path);
+        return c ? ("remove" in c ? null : c.text) : read(path);
+    };
+    const applied = [];
+    const manual = [];
+    for (const m of migrations) {
+        if (had.includes(m.id) || !atLeast(version, m.since))
+            continue;
+        const r = await m.run(view);
+        if ("manual" in r) {
+            manual.push({ id: m.id, title: m.title, why: r.manual });
+            continue;
+        }
+        if ("files" in r)
+            for (const f of r.files)
+                changed.set(f.path, f);
+        applied.push({ id: m.id, title: m.title });
+    }
+    if (applied.length)
+        changed.set(MIGRATIONS_FILE, { path: MIGRATIONS_FILE, text: `${JSON.stringify({ applied: [...had, ...applied.map((a) => a.id)] }, null, 2)}\n` });
+    return { files: [...changed.values()], applied, manual };
+}

package/dist/next/block-mark.d.ts

@@ -0,0 +1,7 @@
+/** True inside CalOS's preview (SitePreview provides it). */
+export declare const InPreview: import("react").Context<boolean>;
+/** The attribute a block's mark carries: the block's index on its page. */
+export declare const BLOCK_MARK = "data-calos-block";
+export declare function BlockMark({ at }: {
+    at: number;
+}): import("react").JSX.Element | null;

package/dist/next/block-mark.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Where each block starts, for CalOS's preview: a site puts <BlockMark at={i} /> before each block it
+// draws, and the preview knows exactly what each block drew (none, one, or several elements), with
+// nothing guessed from the words. On the live site it draws nothing; in the preview, an empty
+// <template>, which the browser never shows and styles never see as drawn.
+import { createContext, useContext } from "react";
+/** True inside CalOS's preview (SitePreview provides it). */
+export const InPreview = createContext(false);
+/** The attribute a block's mark carries: the block's index on its page. */
+export const BLOCK_MARK = "data-calos-block";
+export function BlockMark({ at }) {
+    if (!useContext(InPreview))
+        return null;
+    return _jsx("template", { [BLOCK_MARK]: String(at) });
+}

package/dist/next/blocks.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type KitBlock, type KitClasses } from "./sections.tsx";
+export declare function KitBlocks<B extends KitBlock>({ blocks, render, classes, level, }: {
+    blocks: readonly B[];
+    /** The site's own component for a block, or null (or undefined) for a kind it leaves to the kit. */
+    render: (block: B, i: number) => ReactNode | null | undefined;
+    /** Classes of the site's own for kit sections, in place of the kit's (KitSection). */
+    classes?: Partial<KitClasses>;
+    /** The heading level of a block's own heading: 1 for the one that carries the page's h1. */
+    level?: (i: number) => number;
+}): import("react").JSX.Element;

package/dist/next/blocks.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// A page's blocks drawn, the same way on every site: each after its mark (BlockMark, for CalOS's
+// preview), in a frame when its Layout has a background (a colour, or a photo under a shade), then
+// the site's own component for it, else the kit's (KitSection). A site hands it how it draws its own
+// kinds (`render`), and nothing else: a block whose kind it doesn't draw (one the business put
+// together in CalOS, a slideshow, one the kit adds later) is drawn by the kit in the site's Look.
+//
+// Classes only, no style attribute (the content security policy blocks them): the frame's colour is
+// a class (sections.css reads the Look's variables), and its words go light by a class when its
+// background is dark, worked out from the Look's colour values (lookValues: at build, and as sent
+// in the preview).
+import { Fragment } from "react";
+import { frameClass, hasBackground, linesClass } from "../content/index.js";
+import { BlockMark } from "./block-mark.js";
+import { lookValues } from "./data.js";
+import { Img } from "./parts/Img.js";
+import { KitSection } from "./sections.js";
+export function KitBlocks({ blocks, render, classes, level = () => 2, }) {
+    const vars = lookValues();
+    return (_jsx(_Fragment, { children: blocks.map((block, i) => {
+            const own = render(block, i);
+            const drawn = own ?? _jsx(KitSection, { s: block, level: level(i), classes: classes });
+            return (_jsxs(Fragment, { children: [_jsx(BlockMark, { at: i }), lined(block, hasBackground(block) ? _jsx(Frame, { block: block, vars: vars, children: drawn }) : drawn)] }, i));
+        }) }));
+}
+/** A section between lines across the page's full width, where its Layout says. */
+function lined(block, drawn) {
+    const cls = linesClass(block);
+    return cls ? _jsx("div", { className: cls, children: drawn }) : drawn;
+}
+/** What's behind a section: its colour, and a photo under a shade, the section drawn over them. */
+function Frame({ block, vars, children }) {
+    const bg = block.placement?.background;
+    return (_jsxs("div", { className: frameClass(block, vars), children: [bg?.photo?.src && (_jsx("div", { className: "kit-frame-bg", "aria-hidden": "true", children: _jsx(Img, { src: bg.photo.src, alt: "", sizes: "100vw" }) })), children] }));
+}

package/dist/next/data.d.ts

@@ -4,8 +4,12 @@ import type { Prepared, PreparedImage } from "../prepare.ts";
 export declare function loadPreparedWith(load: () => Prepared): void;
 /** Puts content in the store: CalOS's preview, with the draft it's editing. */
 export declare function setPrepared(p: Prepared): void;
+/** Whether what's drawn is a draft in CalOS's preview (a part with nothing in it yet shows where it goes). */
+export declare const isDraft: () => boolean;
 export declare function prepared(): Prepared;
 export declare const site: () => import("../content/index.ts").Site;
+/** The Look's values as CSS variables (lookVars), at build and in the preview; empty for a site without a Look. */
+export declare const lookValues: () => Record<string, string>;
 export declare function image(src: string): PreparedImage;
 /** The page at a catch-all route's segments (`[[...path]]`), or null. */
 export declare function pageAt(path: string[] | undefined): Page | null;

package/dist/next/data.js

@@ -15,6 +15,8 @@ export function setPrepared(p) {
     current = p;
     drafting = true;
 }
+/** Whether what's drawn is a draft in CalOS's preview (a part with nothing in it yet shows where it goes). */
+export const isDraft = () => drafting;
 /** A picture not chosen yet, in a draft: a grey box where it will go. */
 const NOT_CHOSEN = {
     width: 1600,
@@ -30,6 +32,8 @@ export function prepared() {
     return current;
 }
 export const site = () => prepared().site;
+/** The Look's values as CSS variables (lookVars), at build and in the preview; empty for a site without a Look. */
+export const lookValues = () => prepared().look ?? {};
 export function image(src) {
     const found = prepared().images[src];
     // A section being filled in, in the preview, is drawn with its picture still to choose; a build

package/dist/next/frame.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { type Business, type LookOptions, type Site } from "../content/index.ts";
+/** What the frame reads of the site: its business, pages, menu, footer and Look. */
+export type FrameSite = Pick<Site, "pages" | "menu" | "footer"> & {
+    business: Business;
+    look?: unknown;
+};
+/**
+ * The top of every page: the business's logo or name (home), the menu, and the one thing most
+ * visitors came to do (the menu's button, else a call button where there's a phone). On a phone the
+ * menu folds into a native disclosure, so it opens without any script, and calling stays one tap
+ * away. Sticky or not, its style and layout are the Look's Header (headerOf).
+ */
+export declare function KitHeader({ site, current, look }: {
+    site: FrameSite;
+    current: string;
+    look: Pick<LookOptions, "header">;
+}): import("react").JSX.Element;
+/** The bottom of every page: how to reach them, when they're open, the pages, the policies, and where else they are online. */
+export declare function KitFooter({ site }: {
+    site: FrameSite;
+}): import("react").JSX.Element;
+/**
+ * A whole page's frame: skip to the content, the header, the page in `main`, the footer. The kit's
+ * header and footer unless the site passes its own (`header`, `footer`: null leaves one out).
+ */
+export declare function KitFrame({ site, current, look, header, footer, children }: {
+    site: FrameSite;
+    current: string;
+    look: Pick<LookOptions, "header">;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/next/frame.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { buttonStyleClass, dayRange, footerOf, headerOf, menuOf, telHref } from "../content/index.js";
+import { lookValues } from "./data.js";
+/** The Look's values, where the site's data is loaded (not in a test drawing the frame alone). */
+const lookOf = () => {
+    try {
+        return lookValues();
+    }
+    catch {
+        return {};
+    }
+};
+import { hoursLines } from "../seo.js";
+import { KitMenuGroup } from "./menu-group.js";
+import { Img } from "./parts/Img.js";
+const PATHS = {
+    phone: "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z",
+    mail: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm18 2-10 7L2 6",
+    pin: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
+    menu: "M4 6h16M4 12h16M4 18h16",
+    close: "M18 6 6 18M6 6l12 12",
+};
+/** A line icon beside words that say the same, so hidden from a screen reader. */
+function FrameIcon({ name, className }) {
+    return (_jsx("svg", { className: className ? `kit-icon ${className}` : "kit-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: PATHS[name] }) }));
+}
+/**
+ * The top of every page: the business's logo or name (home), the menu, and the one thing most
+ * visitors came to do (the menu's button, else a call button where there's a phone). On a phone the
+ * menu folds into a native disclosure, so it opens without any script, and calling stays one tap
+ * away. Sticky or not, its style and layout are the Look's Header (headerOf).
+ */
+export function KitHeader({ site, current, look }) {
+    const b = site.business;
+    const h = headerOf(site.look, look);
+    const { links: menu, button: chosen } = menuOf(site);
+    const action = chosen ?? (b.phone ? { label: b.phone, href: telHref(b.phone, b.address?.country) } : null);
+    const isCurrent = (href) => href === current || (href !== "/" && current.startsWith(href));
+    const call = !!action?.href.startsWith("tel:");
+    const link = (m) => (_jsx("a", { href: m.href, "aria-current": isCurrent(m.href) ? "page" : undefined, className: m.emphasis ? "is-emphasis" : undefined, children: m.label }));
+    // The business's button as it chose it: its style (accent, quiet) and a border of its own.
+    const vars = lookOf();
+    const styled = [chosen?.style === "accent" ? "kit-button-accent" : chosen?.style === "quiet" ? "kit-button-quiet" : "", buttonStyleClass(chosen?.style, vars)].filter(Boolean).join(" ");
+    // The phone's menu button: in one of the business's button styles, where the header says.
+    const menuStyled = buttonStyleClass(h.menuStyle, vars);
+    const button = (className) => action && (_jsxs("a", { className: styled ? `${className} ${styled}` : className, href: action.href, children: [call && _jsx(FrameIcon, { name: "phone" }), _jsxs("span", { children: [call && !/call/i.test(action.label) && _jsx("span", { className: "kit-sr", children: "Call " }), action.label] })] }));
+    return (_jsx("header", { className: `kit-header kit-header-${h.style} kit-header-${h.layout}${h.sticky ? " is-sticky" : ""}`, children: _jsxs("div", { className: "kit-wrap kit-header-row", children: [_jsx("a", { className: "kit-brand", href: "/", "aria-label": current === "/" ? `${b.name}, home` : `${b.name}, back to home`, children: b.logo ? _jsx(Img, { src: b.logo.src, alt: "", sizes: "180px", className: "kit-logo", eager: true }) : _jsx("span", { className: "kit-brand-name", children: b.name }) }), menu.length > 0 && (_jsx("nav", { className: "kit-menu-wide", "aria-label": "Main", children: _jsx("ul", { children: menu.map((m) => m.children?.length ? (_jsx(KitMenuGroup, { label: m.label, href: m.href, emphasis: m.emphasis, current: current, children: m.children }, m.href + m.label)) : (_jsx("li", { children: link(m) }, m.href + m.label))) }) })), button(`kit-button kit-header-action${call ? " is-call" : ""}`), menu.length > 0 && (_jsxs("details", { className: `kit-menu-narrow kit-menu-${h.menuShows}`, children: [_jsxs("summary", { className: menuStyled, children: [_jsx(FrameIcon, { name: "menu", className: "when-closed" }), _jsx(FrameIcon, { name: "close", className: "when-open" }), _jsx("span", { className: "kit-menu-word", children: "Menu" })] }), _jsxs("nav", { "aria-label": "Main", children: [_jsx("ul", { children: menu.map((m) => (_jsxs("li", { children: [link(m), !!m.children?.length && (_jsx("ul", { className: "kit-menu-sub", children: m.children.map((c) => (_jsx("li", { children: link(c) }, c.href + c.label))) }))] }, m.href + m.label))) }), button("kit-button")] })] }))] }) }));
+}
+const SOCIAL = { google: "Google", facebook: "Facebook", instagram: "Instagram", yelp: "Yelp", nextdoor: "Nextdoor", linkedin: "LinkedIn", youtube: "YouTube", tiktok: "TikTok" };
+/** The bottom of every page: how to reach them, when they're open, the pages, the policies, and where else they are online. */
+export function KitFooter({ site }) {
+    const b = site.business;
+    // The links edited in CalOS (Footer), else the menu's under "Pages" and the policy pages in the legal row.
+    const isPolicy = (path) => site.pages.find((p) => p.path === path)?.blocks.some((s) => s.type === "policy");
+    const footer = footerOf(site);
+    const columns = site.footer ? footer.columns : footer.columns.map((c) => ({ heading: "Pages", links: c.links.filter((l) => !isPolicy(l.href)) }));
+    const legal = site.footer ? footer.legal : site.pages.filter((p) => isPolicy(p.path)).map((p) => ({ label: p.menu ?? p.title, href: p.path }));
+    const social = Object.entries(b.social ?? {}).filter(([, url]) => url);
+    const hours = b.hours ?? [];
+    return (_jsxs("footer", { className: "kit-footer", children: [_jsxs("div", { className: "kit-wrap kit-footer-grid", children: [_jsxs("div", { className: "kit-footer-about", children: [_jsx("p", { className: "kit-footer-name", children: b.name }), b.tagline && _jsx("p", { className: "kit-footer-muted", children: b.tagline }), _jsxs("ul", { className: "kit-footer-contact", children: [b.phone && (_jsxs("li", { children: [_jsx(FrameIcon, { name: "phone" }), _jsx("a", { href: telHref(b.phone, b.address?.country), children: b.phone })] })), b.email && (_jsxs("li", { children: [_jsx(FrameIcon, { name: "mail" }), _jsx("a", { href: `mailto:${b.email}`, children: b.email })] })), b.address && (_jsxs("li", { children: [_jsx(FrameIcon, { name: "pin" }), _jsx("span", { children: b.showAddress ? (_jsxs(_Fragment, { children: [b.address.street, _jsx("br", {}), b.address.locality, ", ", b.address.region, " ", b.address.postcode] })) : (_jsxs(_Fragment, { children: [b.address.locality, ", ", b.address.region] })) })] }))] })] }), hours.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "kit-footer-heading", children: "Hours" }), _jsx("dl", { className: "kit-footer-hours", children: hoursLines(b).map((h) => (_jsxs("div", { children: [_jsx("dt", { children: dayRange(h.days) }), _jsx("dd", { children: h.time })] }, h.days.join("")))) }), b.hoursNote && _jsx("p", { className: "kit-footer-muted", children: b.hoursNote })] })), columns
+                        .filter((c) => c.links.length)
+                        .map((c, i) => (_jsxs("nav", { "aria-label": c.heading ?? "Footer", children: [c.heading && _jsx("h2", { className: "kit-footer-heading", children: c.heading }), _jsx("ul", { className: "kit-footer-links", children: c.links.map((l) => (_jsx("li", { children: _jsx("a", { href: l.href, children: l.label }) }, l.href))) })] }, i))), social.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "kit-footer-heading", children: "Follow" }), _jsx("ul", { className: "kit-footer-links", children: social.map(([key, url]) => (_jsx("li", { children: _jsx("a", { href: url, rel: "noopener me", children: SOCIAL[key] ?? key }) }, key))) })] }))] }), _jsxs("div", { className: "kit-wrap kit-footer-base", children: [_jsxs("p", { children: ["\u00A9 ", new Date().getFullYear(), " ", b.name, b.licence && _jsxs(_Fragment, { children: [" \u00B7 ", b.licence] }), footer.note && _jsxs(_Fragment, { children: [" \u00B7 ", footer.note] })] }), legal.length > 0 && (_jsx("ul", { className: "kit-footer-policies", children: legal.map((l) => (_jsx("li", { children: _jsx("a", { href: l.href, children: l.label }) }, l.href))) }))] })] }));
+}
+/**
+ * A whole page's frame: skip to the content, the header, the page in `main`, the footer. The kit's
+ * header and footer unless the site passes its own (`header`, `footer`: null leaves one out).
+ */
+export function KitFrame({ site, current, look, header, footer, children }) {
+    return (_jsxs(_Fragment, { children: [_jsx("a", { className: "kit-skip", href: "#main", children: "Skip to content" }), header === undefined ? _jsx(KitHeader, { site: site, current: current, look: look }) : header, _jsx("main", { id: "main", tabIndex: -1, children: children }), footer === undefined ? _jsx(KitFooter, { site: site }) : footer] }));
+}

package/dist/next/index.d.ts

@@ -1,8 +1,12 @@
-export { image, pageAt, prepared, site } from "./data.ts";
+export { image, lookValues, pageAt, prepared, site } from "./data.ts";
+export { KitBlocks } from "./blocks.tsx";
+export { BlockMark } from "./block-mark.tsx";
 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";
-export { KitSection, type KitBlock, type KitClasses } from "./sections.tsx";
+export { KIT_CLASSES, KitSection, type KitBlock, type KitClasses } from "./sections.tsx";
 export { Slideshow } from "./slideshow.tsx";
+export { KitFooter, KitFrame, KitHeader, type FrameSite } from "./frame.tsx";
+export { KitMenuGroup } from "./menu-group.tsx";

package/dist/next/index.js

@@ -1,11 +1,15 @@
 // The plumbing a Next.js site needs from the kit, whatever its design: the prepared content, a page by
 // its path, metadata, picture and Markdown parts, structured data. A site's own components, in its own
-// repository, do the looks. Server components only: nothing here runs in the visitor's browser.
-export { image, pageAt, prepared, site } from "./data.js";
+// repository, do the looks. Server components, but for BlockMark and Slideshow, small client parts.
+export { image, lookValues, pageAt, prepared, site } from "./data.js";
+export { KitBlocks } from "./blocks.js";
+export { BlockMark } from "./block-mark.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";
-export { KitSection } from "./sections.js";
+export { KIT_CLASSES, KitSection } from "./sections.js";
 export { Slideshow } from "./slideshow.js";
+export { KitFooter, KitFrame, KitHeader } from "./frame.js";
+export { KitMenuGroup } from "./menu-group.js";

package/dist/next/menu-group.d.ts

@@ -0,0 +1,11 @@
+export type MenuChild = {
+    label: string;
+    href: string;
+};
+export declare function KitMenuGroup({ label, href, children, current, emphasis }: {
+    label: string;
+    href: string;
+    children: MenuChild[];
+    current: string;
+    emphasis?: boolean;
+}): import("react").JSX.Element;

package/dist/next/menu-group.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A menu link with links under it, on a wide screen: the link itself, and beside it a button that
+// opens the links under it (aria-expanded). Opened by a click, Enter or Space; closed by Escape (back
+// to its button), a click elsewhere, or moving focus out of it. Never hover only: what a mouse can
+// open, a keyboard and a finger can too.
+import { useEffect, useId, useRef, useState } from "react";
+export function KitMenuGroup({ label, href, children, current, emphasis }) {
+    const [open, setOpen] = useState(false);
+    const id = useId();
+    const box = useRef(null);
+    const button = useRef(null);
+    const isCurrent = (h) => h === current || (h !== "/" && current.startsWith(h));
+    useEffect(() => {
+        if (!open)
+            return;
+        const away = (e) => {
+            if (!box.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", away);
+        return () => document.removeEventListener("pointerdown", away);
+    }, [open]);
+    return (_jsxs("li", { ref: box, className: open ? "kit-menu-group is-open" : "kit-menu-group", onKeyDown: (e) => {
+            if (e.key === "Escape" && open) {
+                setOpen(false);
+                button.current?.focus();
+            }
+        }, onBlur: (e) => {
+            if (!box.current?.contains(e.relatedTarget))
+                setOpen(false);
+        }, children: [_jsx("a", { href: href, "aria-current": isCurrent(href) ? "page" : undefined, className: emphasis ? "is-emphasis" : undefined, children: label }), _jsxs("button", { ref: button, type: "button", className: "kit-menu-group-toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((o) => !o), children: [_jsx("svg", { className: "kit-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }), _jsxs("span", { className: "kit-sr", children: ["More under ", label] })] }), _jsx("ul", { id: id, className: "kit-menu-group-list", hidden: !open, children: children.map((c) => (_jsx("li", { children: _jsx("a", { href: c.href, "aria-current": isCurrent(c.href) ? "page" : undefined, children: c.label }) }, c.href + c.label))) })] }));
+}

package/dist/next/parts/LookStyle.js

@@ -3,5 +3,7 @@ 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) } });
+    // And the Google fonts it uses, as the site serves them (fetched when it was built).
+    const p = prepared();
+    return _jsx("style", { dangerouslySetInnerHTML: { __html: [lookCss(p.site.look, look), p.fontFaces].filter(Boolean).join("\n") } });
 }