@caltho/site-kit 0.2.10 → 0.2.11

package/dist/next/preview.js

@@ -8,16 +8,55 @@ import { jsx as _jsx } from "react/jsx-runtime";
 //
 // CalOS → page: { type: "calos:show", site, images, path, selected?, scroll?, labels? }
 // page → CalOS: { type: "calos:ready" }, { type: "calos:pick", path, block },
-//               { type: "calos:error", message }
+//               { type: "calos:error", message }, { type: "calos:overflow", blocks } (the page's
+//               blocks with something past the screen's edge at this width, by index)
 import { Component, useEffect, useRef, useState } from "react";
 import { lookVars } from "../content/look.js";
-import { BUILT_IMAGES, fieldForImage, fieldForText } from "../preview-match.js";
+import { fontFiles, googleFont } from "../fonts-google.js";
+import { BUILT_IMAGES, fieldForImage, fieldForText, matchBlocks } from "../preview-match.js";
+import { BLOCK_MARK, InPreview } from "./block-mark.js";
 import { setPrepared } from "./data.js";
+/** `labels`: what CalOS calls each of the page's blocks, shown on its outline. */
+/** The Google fonts this preview has loaded for a draft (by name), once each. */
+const loadedFonts = new Set();
 /** `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);
+    // A Google font the draft's Look uses and this build doesn't serve yet: loaded from Fontsource's
+    // CDN (the browser's FontFace, which only the font policy governs), so the draft shows in it.
+    useEffect(() => {
+        const l = shown?.site.look;
+        for (const name of [l?.headingFont, l?.bodyFont]) {
+            if (typeof name !== "string" || (look?.fonts && name in look.fonts) || loadedFonts.has(name))
+                continue;
+            const f = googleFont(name);
+            if (!f)
+                continue;
+            loadedFonts.add(name);
+            for (const x of fontFiles(f)) {
+                const face = new FontFace(f.family, `url(${x.url}) format("woff2")`, { weight: x.weight, style: x.style, unicodeRange: x.range, display: "swap" });
+                document.fonts.add(face);
+                face.load().catch(() => document.fonts.delete(face));
+            }
+        }
+        // Fonts the business uploaded: from CalOS, where the editor says each file is (with the pictures).
+        const uploaded = shown?.site.look?.uploadedFonts;
+        for (const f of uploaded ?? [])
+            for (const x of f.files) {
+                const url = shown?.images[x.src]?.src;
+                const key = `${f.family}|${x.src}`;
+                if (!url || loadedFonts.has(key) || !/^https?:\/\//.test(url))
+                    continue;
+                loadedFonts.add(key);
+                const face = new FontFace(f.family, `url(${JSON.stringify(url)})`, { weight: x.weight, style: x.style, display: "swap" });
+                document.fonts.add(face);
+                face.load().catch(() => document.fonts.delete(face));
+            }
+    }, [shown, look]);
     const [round, setRound] = useState(0);
     const latest = useRef(null);
+    const lookRef = useRef(look);
+    lookRef.current = look;
     // Answers go to the address CalOS is open at; until it's spoken, "ready" goes to each it may be.
     const replyTo = useRef(null);
     const post = (msg) => {
@@ -38,7 +77,8 @@ export function SitePreview({ origins, render, look }) {
                 return;
             const m = { ...sent, images: asBuilt(sent.images) };
             replyTo.current = e.origin;
-            setPrepared({ site: m.site, images: m.images, csp: {} });
+            // The draft's Look, its colours read by KitBlocks to know a dark background as it's chosen.
+            setPrepared({ site: m.site, images: m.images, csp: {}, ...(lookRef.current ? { look: lookVars(m.site.look, lookRef.current) } : {}) });
             latest.current = m;
             setShown(m);
             setRound((r) => r + 1);
@@ -70,7 +110,7 @@ export function SitePreview({ origins, render, look }) {
             e.stopPropagation();
             // 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;
+            const under = document.elementsFromPoint(e.clientX, e.clientY).find((el) => el.tagName === "IMG" && seen(el)) ?? target;
             post({ type: "calos:pick", ...pick(under, m, wordsAt(e.clientX, e.clientY)) });
         };
         const onSubmit = (e) => e.preventDefault();
@@ -79,10 +119,10 @@ export function SitePreview({ origins, render, look }) {
             const m = latest.current;
             const target = e.target;
             const blocks = m ? blockElements(m) : null;
-            const n = blocks && target ? blocks.findIndex((el) => el.contains(target)) : -1;
+            const n = blocks && target ? blocks.findIndex((d) => holds(d, target)) : -1;
             const selected = m ? blockElement(m) : null;
             hovered = n >= 0 ? blocks[n] : null;
-            outline("section", hovered && hovered !== selected ? hovered : null, n >= 0 ? m?.labels?.[n] : undefined);
+            outline("section", hovered && hovered[0] !== selected?.[0] ? hovered : null, n >= 0 ? m?.labels?.[n] : undefined);
             outline("hover", hoverable(target));
         };
         const leave = () => {
@@ -103,6 +143,56 @@ export function SitePreview({ origins, render, look }) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [key]);
+    // The footer's own colour, as designed (the site's CSS may set it, not the Look): said to CalOS so
+    // its "as designed" choice shows the colour it is. Only while the draft leaves it as designed.
+    const footerSaid = useRef(null);
+    useEffect(() => {
+        if (!shown)
+            return;
+        const bg = shown.site.look?.footer?.background;
+        if (bg && bg !== "dark")
+            return;
+        const frame = requestAnimationFrame(() => {
+            const footer = document.querySelector("footer.kit-footer");
+            const color = footer ? getComputedStyle(footer).backgroundColor : "";
+            if (color && color !== footerSaid.current)
+                post({ type: "calos:footer", color });
+            footerSaid.current = color;
+        });
+        return () => cancelAnimationFrame(frame);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shown]);
+    // What runs past the edge of the screen, after each drawing and as the width changes: said to
+    // CalOS by block, so the editor can point at the section to fix at this size.
+    useEffect(() => {
+        if (!shown)
+            return;
+        // Nothing said yet for this drawing: the first measure is always said, so a section fixed since
+        // (nothing past the edge any more) is cleared, not left flagged.
+        let last = null;
+        const measure = () => {
+            const { blocks, what } = overflowing(latest.current ?? shown);
+            const said = blocks.join(",");
+            if (said !== last)
+                post({ type: "calos:overflow", blocks, what });
+            last = said;
+        };
+        let frame = 0;
+        const soon = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => requestAnimationFrame(measure));
+        };
+        soon();
+        void document.fonts?.ready.then(soon);
+        window.addEventListener("resize", soon);
+        window.addEventListener("load", soon, true);
+        return () => {
+            cancelAnimationFrame(frame);
+            window.removeEventListener("resize", soon);
+            window.removeEventListener("load", soon, true);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shown, round]);
     // The selected block outlined (and brought into view when CalOS asks), after each drawing.
     useEffect(() => {
         if (!shown)
@@ -120,32 +210,77 @@ export function SitePreview({ origins, render, look }) {
         drawnPath = shown.path;
         // Scrolled here only: scrollIntoView would scroll CalOS's page around the frame too.
         if (el && shown.scroll)
-            window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - window.innerHeight / 4, behavior: "smooth" });
+            window.scrollTo({ top: el[0].getBoundingClientRect().top + window.scrollY - window.innerHeight / 4, behavior: "smooth" });
+        // On a resize, once a frame at most: measured on every event, the page was re-laid out mid-change.
+        let frame = 0;
         const keep = () => {
-            outline("selected", blockElement(latest.current), label(latest.current));
-            outline("section", null);
-            outline("hover", null);
+            if (frame)
+                return;
+            frame = requestAnimationFrame(() => {
+                frame = 0;
+                outline("selected", blockElement(latest.current), label(latest.current));
+                outline("section", null);
+                outline("hover", null);
+            });
         };
-        window.addEventListener("scroll", keep, { passive: true });
+        // The outlines are in the page's coordinates, so scrolling moves them with it; the hover ones go.
+        let hidden = false;
+        const scrolled = () => {
+            if (hidden)
+                return;
+            hidden = true;
+            requestAnimationFrame(() => {
+                hidden = false;
+                outline("section", null);
+                outline("hover", null);
+            });
+        };
+        window.addEventListener("scroll", scrolled, { passive: true });
         window.addEventListener("resize", keep);
         return () => {
-            window.removeEventListener("scroll", keep);
+            cancelAnimationFrame(frame);
+            window.removeEventListener("scroll", scrolled);
             window.removeEventListener("resize", keep);
         };
     }, [shown, round]);
     // The draft's Look, set on the page (LookStyle drew the published one into the build).
+    // One the draft no longer sets (a colour removed, the footer back as designed) is taken off again.
+    const setVars = useRef(new Set());
     useEffect(() => {
         if (!shown || !look)
             return;
-        for (const [k, v] of Object.entries(lookVars(shown.site.look, look)))
-            document.documentElement.style.setProperty(k, v);
+        const vars = lookVars(shown.site.look, look);
+        const style = document.documentElement.style;
+        // The published Look's values (LookStyle's :root rule) the draft no longer has (a colour it
+        // removed): made invalid here, so what reads them falls back as the site will once published.
+        const published = new Set();
+        for (const sheet of Array.from(document.styleSheets)) {
+            let rules;
+            try {
+                rules = sheet.cssRules;
+            }
+            catch {
+                continue;
+            }
+            for (const r of Array.from(rules))
+                if (r instanceof CSSStyleRule && r.selectorText === ":root")
+                    for (const name of Array.from(r.style))
+                        if (name.startsWith("--look-") || name.startsWith("--kit-footer-"))
+                            published.add(name);
+        }
+        for (const k of new Set([...setVars.current, ...published]))
+            if (!(k in vars))
+                style.setProperty(k, "initial");
+        for (const [k, v] of Object.entries(vars))
+            style.setProperty(k, v);
+        setVars.current = new Set(Object.keys(vars));
     }, [shown, look]);
     if (!shown)
         return null;
     const page = shown.site.pages.find((p) => p.path === shown.path) ?? shown.site.pages[0];
     if (!page)
         return null;
-    return (_jsx(Fallback, { onError: (message) => post({ type: "calos:error", message }), children: render(page, shown.site) }, round));
+    return (_jsx(InPreview.Provider, { value: true, children: _jsx(Fallback, { onError: (message) => post({ type: "calos:error", message }), children: render(page, shown.site) }, round) }));
 }
 /** The pictures this build made (finish writes the list into this page), by path. */
 let built = null;
@@ -174,35 +309,100 @@ function asBuilt(images) {
 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"]);
-/** The page's blocks as drawn: `main`'s children (those drawn), when there's one for each block. */
+/**
+ * What each of the page's blocks drew, one list for each block (a block may draw nothing, or more than
+ * one). Exactly, where the site marks where each block starts (BlockMark); otherwise `main`'s
+ * children, found by their words when they aren't one for each block.
+ */
 function blockElements(m) {
     const main = document.querySelector("main");
     const page = m.site.pages[pageIndex(m)];
     if (!main || !page)
         return null;
+    const marked = marks(main, page.blocks.length);
+    if (marked)
+        return marked;
     const kids = [...main.children].filter((e) => !UNDRAWN.has(e.tagName));
-    return kids.length === page.blocks.length ? kids : null;
+    const words = (el) => [el.innerText ?? el.textContent ?? "", ...[...el.querySelectorAll("img[alt]")].map((i) => i.getAttribute("alt") ?? "")].join(" ");
+    const owner = matchBlocks(page.blocks, kids.length === page.blocks.length ? kids.map(() => "") : kids.map(words));
+    return page.blocks.map((_, i) => kids.filter((_, j) => owner[j] === i));
+}
+/**
+ * The page's blocks with something drawn past the left or right edge of the screen (words running
+ * out of a card, a row too wide for a phone), by index. Something inside a box that clips what it
+ * holds on purpose (a slideshow's other slides, a scrolling row) doesn't count.
+ */
+function overflowing(m) {
+    const blocks = blockElements(m);
+    if (!blocks)
+        return { blocks: [], what: [] };
+    const edge = document.documentElement.clientWidth;
+    const clips = (el, root) => {
+        for (let at = el.parentElement; at && at !== root.parentElement; at = at.parentElement) {
+            const c = getComputedStyle(at);
+            if (c.overflowX !== "visible" || c.overflow !== "visible")
+                return true;
+        }
+        return false;
+    };
+    // What it was, said with the block (the element and its words), for whoever's looking into it.
+    const what = [];
+    const out = (root) => [root, ...root.querySelectorAll("*")].some((el) => {
+        const r = el.getBoundingClientRect();
+        if (!r.width || !r.height || getComputedStyle(el).visibility === "hidden")
+            return false;
+        // Across the edge, not wholly off the screen (a field kept out of sight on purpose).
+        const over = ((r.right > edge + 1 && r.left < edge) || (r.left < -1 && r.right > 0)) && !clips(el, root);
+        if (over)
+            what.push(`${el.tagName.toLowerCase()}${typeof el.className === "string" && el.className ? `.${el.className.trim().split(/\s+/).join(".")}` : ""} ${Math.round(r.left)}–${Math.round(r.right)} of ${edge}`);
+        return over;
+    });
+    return { blocks: blocks.flatMap((els, i) => (els.some(out) ? [i] : [])), what };
+}
+/** Each block's elements by the marks before them: what's drawn after a block's mark, up to the next. Null where there are none. */
+function marks(main, count) {
+    const first = main.querySelector(`template[${BLOCK_MARK}]`);
+    if (!first?.parentElement)
+        return null;
+    const out = Array.from({ length: count }, () => []);
+    let at = -1;
+    for (const el of first.parentElement.children) {
+        const mark = el.tagName === "TEMPLATE" ? el.getAttribute(BLOCK_MARK) : null;
+        if (mark !== null)
+            at = Number(mark);
+        else if (at >= 0 && at < count && !UNDRAWN.has(el.tagName))
+            out[at].push(el);
+    }
+    return out;
 }
+const holds = (d, target) => !!d?.some((el) => el.contains(target));
 function blockElement(m) {
     if (!m?.selected)
         return null;
     const [k, p, b, n] = m.selected;
     if (k !== "pages" || p !== pageIndex(m) || b !== "blocks" || typeof n !== "number")
         return null;
-    return blockElements(m)?.[n] ?? null;
+    const d = blockElements(m)?.[n];
+    return d?.length ? d : null;
 }
 /** The words of the text under the pointer: a name set beside other things in one element (a caption with an email and a phone) is still just the name. */
 function wordsAt(x, y) {
     const doc = document;
     const node = doc.caretPositionFromPoint?.(x, y)?.offsetNode ?? doc.caretRangeFromPoint?.(x, y)?.startContainer;
-    return node?.nodeType === Node.TEXT_NODE ? (node.textContent?.trim() ?? null) || null : null;
+    if (node?.nodeType !== Node.TEXT_NODE)
+        return null;
+    // The caret snaps to the nearest text, even across empty space: only words actually under the pointer count.
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    const under = [...range.getClientRects()].some((r) => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
+    return under ? (node.textContent?.trim() ?? null) || null : null;
 }
 /** What a click on `target` meant: the field, and the block it's in. `words`: the text right under the pointer, tried first. */
 function pick(target, m, words = null) {
     const pi = pageIndex(m);
     const page = m.site.pages[pi];
     const blocks = blockElements(m);
-    const n = blocks ? blocks.findIndex((el) => el.contains(target)) : -1;
+    const n = blocks ? blocks.findIndex((d) => holds(d, target)) : -1;
     const block = n >= 0 ? ["pages", pi, "blocks", n] : null;
     const scope = n >= 0 ? page.blocks[n] : null;
     // What the whole site shares (its founders, its case studies), which a section may show too; the
@@ -216,6 +416,16 @@ function pick(target, m, words = null) {
         if (found)
             return { path: found, block: blockOf(found) ?? block };
     }
+    // An icon part has no words to find it by: its name, and which of the section's icons of that name it is.
+    const icon = target.closest("svg[data-icon]");
+    if (icon && scope && n >= 0) {
+        const name = icon.getAttribute("data-icon");
+        const found = iconParts(scope, block).filter((x) => x.name === name);
+        const drawn = blocks[n].flatMap((el) => [...(el.matches("svg[data-icon]") ? [el] : []), ...el.querySelectorAll("svg[data-icon]")]).filter((el) => el.getAttribute("data-icon") === name);
+        const at = found[Math.max(0, drawn.indexOf(icon))] ?? found[0];
+        if (at)
+            return { path: at.path, block };
+    }
     if (words) {
         // 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 })) };
@@ -223,6 +433,16 @@ function pick(target, m, words = null) {
         if (exact)
             return { path: exact, block: blockOf(exact) ?? block };
     }
+    // The header (outside every section) away from its words and pictures, its own empty space: its
+    // settings in the Look, not whatever words its parents hold (the business's name).
+    // The phone's menu button: its own settings (what it shows, its frame), with the header's.
+    if (n < 0 && target.closest(".kit-menu-narrow > summary"))
+        return { path: ["look", "header", "menuShows"], block: null };
+    if (n < 0 && target.closest("header") && !words && !target.closest("a, button, summary, img"))
+        return { path: ["look", "header"], block: null };
+    // The kit's footer the same: its own settings (its colour), where the site's Look has them.
+    if (n < 0 && target.closest("footer.kit-footer") && !words && !target.closest("a, button, summary, img") && m.site.look?.footer)
+        return { path: ["look", "footer"], block: null };
     // The clicked element's words, then its parents' until the block's edge: at each, the section's
     // own fields first, then the site's shared ones, so a parent holding more of the section isn't
     // mistaken for what was clicked.
@@ -236,12 +456,44 @@ function pick(target, m, words = null) {
             if (found)
                 return { path: found, block: blockOf(found) ?? block };
         }
-        if (n >= 0 && el === blocks[n])
+        if (n >= 0 && blocks[n].includes(el))
             break;
     }
     return { path: block, block };
 }
+/** A section's icon parts, in the order they're drawn: each one's path and name. */
+function iconParts(value, base) {
+    const out = [];
+    const visit = (v, path) => {
+        if (Array.isArray(v))
+            return v.forEach((x, i) => visit(x, [...path, i]));
+        if (!v || typeof v !== "object")
+            return;
+        const o = v;
+        if (o.type === "icon" && typeof o.name === "string")
+            out.push({ path, name: o.name });
+        for (const [k, x] of Object.entries(o))
+            if (x && typeof x === "object")
+                visit(x, [...path, k]);
+    };
+    visit(value, base);
+    return out;
+}
 const blockOf = (path) => (path[0] === "pages" && path[2] === "blocks" && typeof path[3] === "number" ? path.slice(0, 4) : null);
+/**
+ * Whether a picture is one a person sees: not in something hidden from them (a slideshow's other
+ * slides, stacked in the same place) and not faded out to nothing.
+ */
+function seen(el) {
+    for (let at = el; at && at !== document.body; at = at.parentElement) {
+        if (at.getAttribute("aria-hidden") === "true")
+            return false;
+        const c = getComputedStyle(at);
+        if (c.visibility === "hidden" || c.display === "none" || Number(c.opacity) < 0.05)
+            return false;
+    }
+    return true;
+}
 /** The smallest thing under the pointer that's words or a picture. */
 function hoverable(el) {
     for (let at = el; at && at !== document.body; at = at.parentElement) {
@@ -269,7 +521,8 @@ function outline(which, el, label) {
     let made = boxes[which];
     if (!made) {
         const box = document.createElement("div");
-        Object.assign(box.style, { position: "fixed", pointerEvents: "none", zIndex: "2147483647", ...looks[which] });
+        // In the page's own coordinates: it scrolls with the page, as the page does, with nothing to redraw.
+        Object.assign(box.style, { position: "absolute", pointerEvents: "none", zIndex: "2147483647", ...looks[which] });
         const tag = document.createElement("span");
         Object.assign(tag.style, {
             position: "absolute",
@@ -286,10 +539,14 @@ function outline(which, el, label) {
         document.body.appendChild(box);
         made = boxes[which] = { box, tag };
     }
-    if (!el)
+    const els = el === null ? [] : Array.isArray(el) ? el : [el];
+    if (!els.length)
         return void (made.box.style.display = "none");
-    const r = el.getBoundingClientRect();
-    Object.assign(made.box.style, { display: "block", top: `${r.top}px`, left: `${r.left}px`, width: `${r.width}px`, height: `${r.height}px` });
+    // Around all of it: a block that drew more than one thing is outlined as one.
+    const rs = els.map((e) => e.getBoundingClientRect());
+    const top = Math.min(...rs.map((x) => x.top)), left = Math.min(...rs.map((x) => x.left));
+    const r = { top, left, width: Math.max(...rs.map((x) => x.right)) - left, height: Math.max(...rs.map((x) => x.bottom)) - top };
+    Object.assign(made.box.style, { display: "block", top: `${r.top + window.scrollY}px`, left: `${r.left + window.scrollX}px`, width: `${r.width}px`, height: `${r.height}px` });
     made.tag.textContent = label ?? "";
     made.tag.style.display = label ? "block" : "none";
 }

package/dist/next/sections.d.ts

@@ -4,20 +4,29 @@ export type KitBlock = {
     placement?: Record<string, unknown>;
 } & Record<string, unknown>;
 /**
- * The site's own classes for a kit section's parts, each in place of the kit's: its band, its
- * container, its heading, its words, and its buttons (the main one and a quieter one).
+ * The styles for each thing a kit section draws. A kit section follows the site's Look (its theme:
+ * type scale, colours, buttons, width and spacing, as --look-* variables) with the kit's own classes
+ * (sections.css), so it looks right on any site with none of these given. A site may still name its
+ * own for any of them, in place of the kit's: `headingLarge` a section's own heading, `headingMedium`
+ * a heading under it, `headingSmall` the smallest; `text` body text, `muted` quieter text beside it (a
+ * price's "per month", a fact's label, who a quote is from).
  */
 export type KitClasses = {
-    section?: string;
-    wrap?: string;
-    heading?: string;
-    text?: string;
-    button?: string;
-    buttonQuiet?: string;
+    section: string;
+    wrap: string;
+    headingLarge: string;
+    headingMedium: string;
+    headingSmall: string;
+    text: string;
+    muted: string;
+    button: string;
+    buttonQuiet: string;
 };
+/** The kit's own classes, drawn from the Look by sections.css. */
+export declare const KIT_CLASSES: KitClasses;
 /** A block of one of the kit's types, drawn; null for any other (the site's own to draw). */
-export declare function KitSection({ s, level, classes }: {
+export declare function KitSection({ s, level, classes: given }: {
     s: KitBlock;
     level?: number;
-    classes?: KitClasses;
+    classes?: Partial<KitClasses>;
 }): import("react").JSX.Element | null;