@caltho/site-kit 0.2.10 → 0.3.0

package/dist/next/preview.js

@@ -8,16 +8,62 @@ 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)
+// Built sections (../tree/messages.ts): calos:built-select, -hover and -boxes to CalOS;
+// calos:built-highlight and -state from it.
+import { allPages } from "../content/lists.js";
 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, isShown, matchBlocks, withoutVariant } from "../preview-match.js";
+import { showWithin, startBehaviors } from "../behaviors/index.js";
+import { swatchSlugs, tailwindInput } from "../built/theme.js";
+import { hasBuilt } from "../built/tree.js";
+import { NODE_ATTR } from "../tree/index.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) => {
@@ -33,12 +79,22 @@ export function SitePreview({ origins, render, look }) {
         const onMessage = (e) => {
             if (!origins.includes(e.origin) || e.source !== window.parent)
                 return;
+            const said = e.data;
+            if (said?.type === "calos:built-highlight" && latest.current) {
+                highlight = { block: said.block, nodes: Array.isArray(said.nodes) ? said.nodes.filter((x) => typeof x === "string") : [] };
+                return drawHighlight(latest.current, true);
+            }
+            if (said?.type === "calos:built-state" && latest.current) {
+                forced = said.state === "normal" ? null : { block: said.block, node: said.node, state: said.state };
+                return applyState(latest.current);
+            }
             const sent = e.data;
             if (sent?.type !== "calos:show")
                 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);
@@ -66,11 +122,29 @@ export function SitePreview({ origins, render, look }) {
             const target = e.target;
             if (!m || !target)
                 return;
+            // A built section's own controls (a carousel's dots and arrows, which aren't nodes) work as on
+            // the site, so a slide can be brought up to edit.
+            if (target.closest(".kit-carousel-controls button, button[data-kit-to]"))
+                return;
             e.preventDefault();
             e.stopPropagation();
+            // Only what a person sees is what they clicked: the top element under the pointer that's shown,
+            // not a slide faded out over it (a carousel's slides are stacked in one place, the hidden ones
+            // still under the pointer), nor the words of one.
+            const stack = document.elementsFromPoint(e.clientX, e.clientY);
+            const shownEl = stack.find(seen) ?? target;
+            // A built section's element names its node: exact, nothing guessed.
+            const node = shownEl.closest(`[${NODE_ATTR}]`);
+            if (node) {
+                const n = blockElements(m)?.findIndex((d) => holds(d, node)) ?? -1;
+                // Or in the site's own header or footer (built): -1 or -2, as the editor numbers them.
+                const at = n >= 0 ? n : frameOf(node);
+                if (at !== null)
+                    return post({ type: "calos:built-select", block: at, node: node.getAttribute(NODE_ATTR), shift: e.shiftKey });
+            }
             // 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 = stack.find((el) => el.tagName === "IMG" && seen(el)) ?? shownEl;
             post({ type: "calos:pick", ...pick(under, m, wordsAt(e.clientX, e.clientY)) });
         };
         const onSubmit = (e) => e.preventDefault();
@@ -79,13 +153,30 @@ 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("hover", hoverable(target));
+            outline("section", hovered && hovered[0] !== selected?.[0] ? hovered : null, n >= 0 ? m?.labels?.[n] : undefined);
+            // Over a built section, the element itself (said to CalOS, for its layers), not the words in it.
+            const shownEl = document.elementsFromPoint(e.clientX, e.clientY).find(seen) ?? target;
+            // In the site's own header or footer (built): -1 or -2, as the editor knows them.
+            const framed = n < 0 && shownEl ? shownEl.closest(`[${NODE_ATTR}]`) : null;
+            const f = framed ? frameOf(framed) : null;
+            const node = n >= 0 ? (shownEl?.closest(`[${NODE_ATTR}]`) ?? null) : f !== null ? framed : null;
+            const id = node && (f !== null || holds(blocks[n], node)) ? node.getAttribute(NODE_ATTR) : null;
+            const at = f ?? n;
+            const said = id ? `${at}:${id}` : null;
+            if (said !== hoverSaid) {
+                if (id || hoverSaid)
+                    post({ type: "calos:built-hover", block: id ? at : Number(hoverSaid.split(":")[0]), node: id });
+                hoverSaid = said;
+            }
+            outline("hover", id ? node : hoverable(target));
         };
         const leave = () => {
+            if (hoverSaid)
+                post({ type: "calos:built-hover", block: Number(hoverSaid.split(":")[0]), node: null });
+            hoverSaid = null;
             hovered = null;
             outline("section", null);
             outline("hover", null);
@@ -103,6 +194,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 +261,118 @@ 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);
+            });
+        };
+        // 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", keep, { passive: true });
+        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]);
+    // Built sections: their classes drawn as they're typed (Tailwind's browser build, given the same
+    // input as the build's compiler), their behaviors running (nothing moving by itself, so what's
+    // being edited stays put), where each element is said to CalOS after every drawing (and as the
+    // page scrolls, resizes or the classes' CSS changes), and the editor's selection and state kept.
+    useEffect(() => {
+        if (!shown)
+            return;
+        const page = allPages(shown.site).find((p) => p.path === shown.path) ?? shown.site.pages[0];
+        if (!page || !hasBuilt(page.blocks))
+            return;
+        loadTailwind(tailwindInput(swatchSlugs(look ? lookVars(shown.site.look, look) : undefined)));
+        if (!behaving) {
+            behaving = true;
+            startBehaviors(true);
+        }
+        let frame = 0;
+        const soon = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                const m = latest.current ?? shown;
+                applyState(m);
+                drawHighlight(m, false);
+                for (const [block, boxes] of builtBoxes(m))
+                    post({ type: "calos:built-boxes", block, boxes });
+            });
+        };
+        soon();
+        // The browser build writes the classes' CSS a moment after they're drawn: the boxes are said again then.
+        const css = new MutationObserver(soon);
+        css.observe(document.head, { childList: true, subtree: true, characterData: true });
+        void document.fonts?.ready.then(soon);
+        window.addEventListener("resize", soon);
+        window.addEventListener("scroll", soon, { passive: true });
+        return () => {
+            cancelAnimationFrame(frame);
+            css.disconnect();
+            window.removeEventListener("resize", soon);
+            window.removeEventListener("scroll", soon);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shown, round, look]);
     // 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];
+    const page = allPages(shown.site).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 +401,113 @@ 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;
+    // The caret snaps to the nearest text, even across empty space: only words actually under the pointer count.
+    const under = (t) => {
+        const range = document.createRange();
+        range.selectNodeContents(t);
+        return [...range.getClientRects()].some((r) => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
+    };
+    const words = (t) => (t.textContent?.trim() ?? null) || null;
+    // Words a person sees: the caret finds text in whatever's on top, a faded-out slide stacked over
+    // the one showing as much as the one showing.
+    if (node?.nodeType === Node.TEXT_NODE && node.parentElement && seen(node.parentElement))
+        return under(node) ? words(node) : null;
+    // Then the words of the shown elements under the pointer, the top one first.
+    for (const el of document.elementsFromPoint(x, y)) {
+        if (!seen(el))
+            continue;
+        const t = [...el.childNodes].find((c) => c.nodeType === Node.TEXT_NODE && c.textContent?.trim() && under(c));
+        if (t)
+            return words(t);
+    }
+    return 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 +521,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 +538,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 +561,42 @@ 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) {
+    const chain = [];
+    for (let at = el; at && at !== document.body; at = at.parentElement) {
+        const c = getComputedStyle(at);
+        chain.push({ ariaHidden: at.getAttribute("aria-hidden"), inert: at.hasAttribute("inert"), visibility: c.visibility, display: c.display, opacity: c.opacity });
+    }
+    return isShown(chain);
+}
 /** 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) {
@@ -252,6 +607,130 @@ function hoverable(el) {
     }
     return null;
 }
+// ---- built sections ----
+/** What the editor has selected in a built section (calos:built-highlight), outlined after every drawing. */
+let highlight = null;
+/** A node drawn as hovered or focused while those classes are edited (calos:built-state). */
+let forced = null;
+/** The built node last said to be under the pointer ("block:node"). */
+let hoverSaid = null;
+let behaving = false;
+let tailwind = null;
+/**
+ * Tailwind's browser build, loaded once (a chunk of its own: only this page carries it, never a
+ * visitor's), compiling the classes on the page as they change. Its input is set first, so it
+ * never compiles its default (which resets the page's own styles): the theme and utilities only,
+ * prefixed as built sections draw them, with the draft's Look as the theme.
+ */
+function loadTailwind(input) {
+    let style = document.getElementById("kit-tailwind");
+    if (!style) {
+        style = document.createElement("style");
+        style.id = "kit-tailwind";
+        style.setAttribute("type", "text/tailwindcss");
+        document.head.appendChild(style);
+    }
+    if (style.textContent !== input)
+        style.textContent = input;
+    tailwind ??= import("@tailwindcss/browser").catch((err) => {
+        tailwind = null;
+        console.error("site-kit: Tailwind's browser build didn't load", err);
+    });
+}
+/** The site's own header (-1) or footer (-2), as the editor numbers them: the one a built element is in, or null. */
+const FRAMES = { "-1": "header", "-2": "footer" };
+function frameOf(el) {
+    const f = el.closest("[data-kit-frame]")?.getAttribute("data-kit-frame");
+    return f === "header" ? -1 : f === "footer" ? -2 : null;
+}
+function frameEls(block) {
+    const which = FRAMES[String(block)];
+    const el = which ? document.querySelector(`[data-kit-frame="${which}"]`) : null;
+    return el ? [el] : [];
+}
+/** The elements drawn for a node of a block (a repeated node has one for each item). */
+function nodeEls(m, block, node) {
+    const els = block < 0 ? frameEls(block) : (blockElements(m)?.[block] ?? []);
+    const sel = `[${NODE_ATTR}="${CSS.escape(node)}"]`;
+    return els.flatMap((el) => [...(el.matches(sel) ? [el] : []), ...el.querySelectorAll(sel)]);
+}
+/** Where each built element is on screen, by block, for CalOS's overlays: only what's shown (not a slide faded out). */
+function builtBoxes(m) {
+    const page = m.site.pages[pageIndex(m)];
+    const blocks = blockElements(m);
+    if (!page || !blocks)
+        return [];
+    const out = [];
+    page.blocks.forEach((b, i) => {
+        if (b.type !== "built" && b.type !== "use")
+            return;
+        const boxes = (blocks[i] ?? [])
+            .flatMap((el) => [...(el.hasAttribute(NODE_ATTR) ? [el] : []), ...el.querySelectorAll(`[${NODE_ATTR}]`)])
+            .filter(seen)
+            .map((el) => {
+            const r = el.getBoundingClientRect();
+            return { node: el.getAttribute(NODE_ATTR), x: Math.round(r.left), y: Math.round(r.top), w: Math.round(r.width), h: Math.round(r.height) };
+        });
+        out.push([i, boxes]);
+    });
+    return out;
+}
+/** The selected nodes outlined; brought into view when CalOS has just selected them, and shown where a behavior hides them (another slide, tab or closed item). */
+const highlightBoxes = [];
+function drawHighlight(m, scroll) {
+    const els = highlight ? highlight.nodes.flatMap((id) => nodeEls(m, highlight.block, id).slice(0, 1)) : [];
+    if (scroll)
+        els.forEach((el) => showWithin(el));
+    while (highlightBoxes.length < els.length) {
+        const box = document.createElement("div");
+        Object.assign(box.style, { position: "absolute", pointerEvents: "none", zIndex: "2147483647", ...looks.selected });
+        document.body.appendChild(box);
+        highlightBoxes.push(box);
+    }
+    highlightBoxes.forEach((box, i) => {
+        const el = els[i];
+        if (!el)
+            return void (box.style.display = "none");
+        const r = el.getBoundingClientRect();
+        Object.assign(box.style, { display: "block", top: `${r.top + window.scrollY}px`, left: `${r.left + window.scrollX}px`, width: `${r.width}px`, height: `${r.height}px` });
+    });
+    const first = els[0];
+    if (scroll && first) {
+        const r = first.getBoundingClientRect();
+        if (r.top < 0 || r.bottom > window.innerHeight)
+            window.scrollTo({ top: r.top + window.scrollY - window.innerHeight / 4, behavior: "smooth" });
+    }
+}
+/**
+ * A node drawn as hovered or focused: each of its classes for that state (hover:, focus:; and
+ * group-hover: and the like on what's inside it when it's a group) added without the state, so it
+ * shows while its hover classes are edited. Whatever was added before is taken off first.
+ */
+const STATE_VARIANTS = { hover: ["hover"], focus: ["focus", "focus-visible", "focus-within"] };
+const GROUP_VARIANTS = { hover: ["group-hover"], focus: ["group-focus", "group-focus-within"] };
+let forcedClasses = [];
+function applyState(m) {
+    for (const f of forcedClasses)
+        f.el.classList.remove(f.cls);
+    forcedClasses = [];
+    if (!forced)
+        return;
+    const force = (el, variants) => {
+        for (const c of [...el.classList]) {
+            const plain = withoutVariant(c, variants);
+            if (plain && !el.classList.contains(plain)) {
+                el.classList.add(plain);
+                forcedClasses.push({ el, cls: plain });
+            }
+        }
+    };
+    for (const el of nodeEls(m, forced.block, forced.node)) {
+        force(el, STATE_VARIANTS[forced.state]);
+        if ([...el.classList].some((c) => /:group$/.test(c)))
+            for (const inner of el.querySelectorAll(`[${NODE_ATTR}]`))
+                force(inner, GROUP_VARIANTS[forced.state]);
+    }
+}
 // Outlines drawn over the page, sized through the style object (allowed by the content security
 // policy, where a style attribute in the markup isn't), never catching the pointer. A section's
 // outline carries its name.
@@ -269,7 +748,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 +766,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";
 }