@caltho/site-kit 0.2.11 → 0.3.0

package/README.md

@@ -74,9 +74,16 @@ the kit only checks it's a URL.
 
 Sections any site can use, built once here (accessible, sized for each screen, inside the content
 security policy) so a site gets them with a kit update rather than code of its own. CalOS offers
-them in its editor like the site's own, and Cal can add one. Today: **gallery** (photos in a grid,
-each with an optional caption, opening its largest copy; 2 to 4 across, square, landscape, portrait
-or as taken) and **slideshow** (photos one at a time, fading from one to the next, with captions).
+them in its editor like the site's own, and Cal can add one. Today:
+
+- **gallery**: photos in a grid, each with an optional caption, opening its largest copy; 2 to 4
+  across, square, landscape, portrait or as taken.
+- **slideshow**: photos one at a time, fading from one to the next, with captions.
+- **own**: your own section, columns of parts (below).
+- **built**: a section built in CalOS (or by Cal) as a tree of elements styled with Tailwind
+  classes: anything a designer builds with HTML and Tailwind (below, "Built sections").
+- **use**: one of the site's components (a tree kept once in the content's `components`) with its
+  slots' words, links and pictures filled in; changing the component changes every use.
 
 **Your own section** (`own`) is built in CalOS rather than in code: a heading and intro over one to
 four columns (or a wide one beside a narrow one), each a list of parts (heading, text, photo, button,
@@ -130,6 +137,80 @@ from the site's Look (`--look-*`: its type scale, colours, buttons, width and sp
 classes of the site's; a site may still give its own for any part, in place of the kit's:
 `<KitBlocks … classes={{ headingLarge: "font-display text-3xl" }} />`.
 
+## Built sections
+
+A **built** section is a tree of elements (`@caltho/site-kit/tree`: the `Node` type, its zod schema
+`built`, `component` and `use`, the class checker, behaviors' settings, and the messages between
+CalOS's editor and the preview). The kit draws each node as its tag with its Tailwind classes:
+
+- **Checked as it's drawn**, whatever the content says: a tag outside the list is left out, a class
+  the checker refuses is dropped (`safeClasses`), a link that isn't a page, `#part`, http(s), mailto:
+  or tel: goes nowhere (an outside one marked `external` opens in a new tab with
+  `rel="noopener noreferrer"`), a picture is one of the site's own through the kit's images, a video
+  is the kit's own YouTube (no-cookie) or Vimeo (no tracking) player built from a provider and an
+  id, words are light Markdown whose HTML is shown as text, `label` is its `aria-label`, `hidden`
+  nodes aren't drawn. A tree's depth, size and ids are checked with the content.
+- **Shared values**: `bind` shows a value from the site's content by its dotted path
+  (`company.email`); `repeat` draws a node once for each item of a list (`caseStudies`), its binds
+  reading `item.…`.
+- **Classes are prefixed** as drawn (`p-4` is `kit:p-4`), so nothing of the site's own is restyled
+  by them, nor they by its classes of the same names. `prepare` compiles exactly the classes the
+  content's trees use with Tailwind's own compiler (`tailwindcss` 4.3.3), with **no reset** and in no
+  cascade layer, into `public/_kit/built.<hash>.css`; a page with a built section links it (React
+  puts the link in the head), a page without doesn't.
+- **The Look is the theme**: colours by role (`bg-brand`, `text-on-brand`, `text-ink`, `bg-page`,
+  `text-muted`, `border-line`, `bg-soft`, `text-accent`, `bg-light`, `bg-dark`) and the site's own by
+  their slug (`bg-dark-sand`), fonts (`font-display`/`font-heading`, `font-body`/`font-text`), the
+  type scale (`text-display`, `text-h1` … `text-small`, each with its line height, tracking and
+  weight), corners (`rounded-card`, `rounded-button`), width (`max-w-content`) and spacing
+  (`px-gutter`, `py-section`), each reading the Look's `--look-*` variable, so a change of Look needs
+  no build of the CSS. Tailwind's own scale and colours are there too. `@caltho/site-kit/theme` has
+  the tokens and the input both compilers are given (`tailwindInput`).
+- **Behaviors**, chosen not written: `carousel` (dots, arrows, a stop button, the arrow keys, a
+  swipe; its own controls where the design marks nodes with the slots prev, next and dots), `tabs`
+  (the first child holds the tabs, the children after it are the panels), `accordion` (each child an
+  item, its first child the heading that opens it), `marquee`, `reveal`, `count-up`, and `sticky`
+  (CSS alone). Each is a small script of its own, written by `prepare` to `public/_kit` and loaded
+  only on a page that uses it. Without scripting a carousel shows its first slide, tabs show every
+  panel, every accordion item is open, a marquee's row is still and scrollable; nothing moves for
+  someone who asked for less motion.
+- **In CalOS's preview** each element carries `data-node` (never on the published page), so a click
+  names its node (`calos:built-select`, with shift), the pointer's node is said (`calos:built-hover`)
+  and where each element is (`calos:built-boxes`); the editor outlines nodes (`calos:built-highlight`,
+  bringing up the slide, tab or item that holds one) and draws one as hovered or focused
+  (`calos:built-state`). Classes take effect as they're typed with Tailwind's browser build
+  (`@tailwindcss/browser` 4.3.3, the same input as the build's), loaded by the preview page only;
+  visitors never load it. The preview page's policy allows its inline styles for that.
+
+**What a site needs to do**: nothing beyond what it has, on 0.3.0: its schema takes the kit's
+`sections` (built and use come with them), it draws blocks with `KitBlocks`, imports
+`sections.css`, and runs `prepare` and `finish`. `public/_kit` is written by every build (add it to
+`.gitignore` with `public/_img`).
+
+## Cookie banner
+
+Off unless a site turns it on (`consent: { on: true }` in its content, edited in CalOS): visits are
+then counted only once a visitor accepts (finish loads the counter after the choice, never before),
+and `KitFrame` draws a banner in the site's words (`text`, `accept`, `decline`, a `policy` link),
+along the bottom or top or in a corner (`place`), in the kit's design or one of the site's components
+(`design`: a tree with the slots text, accept, decline and policy). The kit's script shows it to a
+visitor who hasn't chosen, keeps the choice in their browser, and brings it back from anything
+marked `data-kit-consent="change"`. The privacy policy says it. Off, visits are counted without
+cookies as before, and no banner is needed.
+
+## Content formats
+
+A site is the starter plus its configuration, so the configuration's format is the kit's. The
+content says its format (`format`; none is 0, before built sections; this kit's is
+`CONTENT_FORMAT`, 1). When a kit changes a shape, a migration in `@caltho/site-kit/content-migrate`
+moves content to it, as data: `migrateContent(content)` runs those it hasn't had, in order, once
+each, and returns `{ ok: true, content, from, format, applied }`, or `{ ok: false, error: { id,
+message, path } }` with the content as it was when one can't move something (for Caltho to fix in
+the migration, never a site by hand). CalOS runs it on a site's draft and published content when
+the site moves to a newer kit; `prepare` runs it too, so content not moved yet still builds. A new
+kind of block or optional field needs no migration, only the number. Code migrations (a site's own
+files) are `@caltho/site-kit/migrate`.
+
 ## The theme
 
 The Look is the site's theme. Beside its fonts, brand and accent colours, corners and buttons, it has

package/dist/behaviors/accordion.d.ts

@@ -0,0 +1,4 @@
+export declare function accordion(el: HTMLElement, s: {
+    single?: boolean;
+    open?: number;
+}): void;

package/dist/behaviors/accordion.js

@@ -0,0 +1,56 @@
+// An accordion: each child of the node is an item, its first child the heading that opens and closes
+// it, the rest what it opens. The heading works as a button (a click, Enter or Space) and says
+// whether it's open. Without scripting every item is open, so all of it can be read.
+//
+// Self-contained: sent to visitors as its own script (./index.ts). The kit marks the items
+// (data-kit-item), headings (data-kit-head) and what they open (data-kit-body) (../next/built.tsx).
+export function accordion(el, s) {
+    const items = Array.from(el.querySelectorAll(":scope > [data-kit-item]"));
+    const key = Math.random().toString(36).slice(2, 8);
+    const parts = items.map((item, i) => {
+        const head = item.querySelector(":scope > [data-kit-head]");
+        const body = Array.from(item.querySelectorAll(":scope > [data-kit-body]"));
+        body.forEach((b, j) => (b.id ||= `kit-acc-${key}-${i}-${j}`));
+        return { item, head, body };
+    });
+    const set = (i, open) => {
+        const p = parts[i];
+        p.item.toggleAttribute("data-open", open);
+        p.head?.setAttribute("aria-expanded", String(open));
+        p.body.forEach((b) => (b.hidden = !open));
+    };
+    parts.forEach((p, i) => {
+        const head = p.head;
+        if (!head)
+            return;
+        if (head.tagName !== "BUTTON") {
+            head.setAttribute("role", "button");
+            head.tabIndex = 0;
+        }
+        head.setAttribute("aria-controls", p.body.map((b) => b.id).join(" "));
+        const toggle = () => {
+            const open = head.getAttribute("aria-expanded") !== "true";
+            if (open && s.single)
+                parts.forEach((_, j) => j !== i && set(j, false));
+            set(i, open);
+        };
+        head.addEventListener("click", (e) => {
+            e.preventDefault();
+            toggle();
+        });
+        head.addEventListener("keydown", (e) => {
+            if (head.tagName !== "BUTTON" && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                toggle();
+            }
+        });
+        set(i, i === s.open);
+    });
+    // CalOS's preview asks for the item holding what's selected to be opened.
+    el.addEventListener("kit:show", (e) => {
+        const i = parts.findIndex((p) => p.item.contains(e.target));
+        if (i >= 0)
+            set(i, true);
+    });
+    el.setAttribute("data-kit-ready", "");
+}

package/dist/behaviors/carousel.d.ts

@@ -0,0 +1,4 @@
+export declare function carousel(el: HTMLElement, s: {
+    seconds?: number;
+    pauseOnHover?: boolean;
+}, still: boolean): void;

package/dist/behaviors/carousel.js

@@ -0,0 +1,127 @@
+// A carousel: its slides one at a time, by its dots and arrows (buttons, each saying what it shows),
+// the arrow keys while it has focus, or a swipe; and every few seconds, where it's set to, while it's
+// on screen and not pointed at or focused, with a button to stop it, and never for someone who asked
+// for less motion. Without scripting the first slide shows (sections.css), and the controls don't.
+//
+// Self-contained (nothing from outside the function): it's sent to visitors as its own script
+// (./index.ts). The kit draws what it works on (../next/built.tsx): the slides in a track
+// (data-kit-track, data-kit-slide, the first data-active), the dots (data-kit-to), arrows
+// (data-kit-prev, data-kit-next) and the stop button (data-kit-pause).
+export function carousel(el, s, still) {
+    const track = el.querySelector(":scope > [data-kit-track]");
+    if (!track)
+        return;
+    const slides = Array.from(track.children).filter((c) => c.hasAttribute("data-kit-slide"));
+    const n = slides.length;
+    const mine = (sel) => Array.from(el.querySelectorAll(sel)).filter((x) => x.closest('[data-kit-behavior="carousel"]') === el);
+    const dots = mine("[data-kit-to]");
+    const pause = mine("[data-kit-pause]")[0];
+    const slideWise = track.getAttribute("data-kit-transition") === "slide";
+    const reduce = still || window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let at = Math.max(0, slides.findIndex((x) => x.hasAttribute("data-active")));
+    let timer = 0;
+    let held = false;
+    let stopped = false;
+    let seen = true;
+    const show = (i) => {
+        at = ((i % n) + n) % n;
+        slides.forEach((x, j) => {
+            const on = j === at;
+            x.toggleAttribute("data-active", on);
+            if (on)
+                x.removeAttribute("aria-hidden");
+            else
+                x.setAttribute("aria-hidden", "true");
+            x.inert = !on;
+            // Sideways: each slide moved by the place shown (a style set from script, which the page's policy allows).
+            if (slideWise)
+                x.style.transform = `translateX(${-100 * at}%)`;
+        });
+        dots.forEach((d, j) => d.setAttribute("aria-current", j === at ? "true" : "false"));
+        wait();
+    };
+    const moving = () => !!s.seconds && !reduce && !held && !stopped && seen && !document.hidden && n > 1;
+    function wait() {
+        clearTimeout(timer);
+        if (moving())
+            timer = window.setTimeout(() => (el.isConnected ? show(at + 1) : undefined), Math.max(2, s.seconds ?? 5) * 1000);
+    }
+    // A control that isn't a button of its own (a designed arrow drawn as a div) still works from the keyboard.
+    const press = (b, go) => {
+        if (b.tagName !== "BUTTON") {
+            b.setAttribute("role", "button");
+            b.tabIndex = 0;
+            b.addEventListener("keydown", (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    go();
+                }
+            });
+        }
+        b.addEventListener("click", (e) => {
+            e.preventDefault();
+            go();
+        });
+    };
+    if (n < 2)
+        return void el.setAttribute("data-kit-ready", "");
+    dots.forEach((d) => press(d, () => show(Number(d.getAttribute("data-kit-to")))));
+    mine("[data-kit-prev]").forEach((b) => press(b, () => show(at - 1)));
+    mine("[data-kit-next]").forEach((b) => press(b, () => show(at + 1)));
+    if (pause) {
+        // Nothing turns by itself (no seconds, less motion asked for, CalOS's still preview): no pause to press.
+        // Set as a style too, since the element's own display class (inline-flex) would outrank [hidden].
+        if (!s.seconds || reduce) {
+            pause.hidden = true;
+            pause.style.display = "none";
+        }
+        press(pause, () => {
+            stopped = !stopped;
+            pause.setAttribute("aria-pressed", String(stopped));
+            pause.setAttribute("aria-label", stopped ? "Play the slides" : "Pause the slides");
+            pause.toggleAttribute("data-stopped", stopped);
+            wait();
+        });
+    }
+    el.addEventListener("keydown", (e) => {
+        const t = e.target;
+        if (t.closest("input, textarea, select, [contenteditable]"))
+            return;
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+            e.preventDefault();
+            show(at + (e.key === "ArrowRight" ? 1 : -1));
+        }
+    });
+    if (s.pauseOnHover !== false) {
+        el.addEventListener("pointerenter", () => ((held = true), wait()));
+        el.addEventListener("pointerleave", () => ((held = false), wait()));
+    }
+    el.addEventListener("focusin", () => ((held = true), wait()));
+    el.addEventListener("focusout", (e) => {
+        if (!el.contains(e.relatedTarget))
+            (held = false), wait();
+    });
+    // A swipe on a touch screen.
+    let from = null;
+    track.addEventListener("pointerdown", (e) => (from = e.clientX));
+    track.addEventListener("pointerup", (e) => {
+        if (from !== null && Math.abs(e.clientX - from) > 40)
+            show(at + (e.clientX < from ? 1 : -1));
+        from = null;
+    });
+    // Off screen or in another tab, it waits.
+    if (typeof IntersectionObserver !== "undefined")
+        new IntersectionObserver(([e]) => {
+            seen = !!e?.isIntersecting;
+            wait();
+        }).observe(el);
+    document.addEventListener("visibilitychange", wait);
+    // CalOS's preview asks for the slide holding what's selected to be shown.
+    el.addEventListener("kit:show", (e) => {
+        const i = slides.findIndex((x) => x.contains(e.target));
+        if (i >= 0)
+            show(i);
+    });
+    el.setAttribute("data-kit-ready", "");
+    show(at);
+}

package/dist/behaviors/filter.d.ts

@@ -0,0 +1 @@
+export declare function filter(el: HTMLElement): void;

package/dist/behaviors/filter.js

@@ -0,0 +1,25 @@
+// A filter: the buttons inside it choose which of the items repeated inside it show, by a field of the
+// list (its settings' field): a button matches the items whose value is its words (lowercase, dashes
+// for spaces: "Real estate" is real-estate), "All" (or no words) shows every one. The chosen button says
+// so (aria-pressed), for its design's aria-pressed: classes. Without scripting every item shows.
+//
+// Self-contained: sent to visitors as its own script (./index.ts). The kit marks each item with its value
+// (data-kit-filter-value, ../next/built.tsx).
+export function filter(el) {
+    const norm = (v) => v.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+    const items = () => Array.from(el.querySelectorAll("[data-kit-filter-value]"));
+    const buttons = Array.from(el.querySelectorAll("button")).filter((b) => !b.closest("[data-kit-filter-value]"));
+    const valueOf = (b) => {
+        const v = norm(b.textContent ?? "");
+        return v === "all" ? "" : v;
+    };
+    const choose = (chosen) => {
+        const v = chosen ? valueOf(chosen) : "";
+        items().forEach((i) => (i.hidden = !!v && i.getAttribute("data-kit-filter-value") !== v));
+        buttons.forEach((b) => b.setAttribute("aria-pressed", String(b === chosen)));
+    };
+    buttons.forEach((b) => b.addEventListener("click", (e) => (e.preventDefault(), choose(b))));
+    // Every item to start, its "All" button pressed where it has one.
+    choose(buttons.find((b) => valueOf(b) === "") ?? null);
+    el.setAttribute("data-kit-ready", "");
+}

package/dist/behaviors/index.d.ts

@@ -0,0 +1,14 @@
+import type { BehaviorName } from "../tree/index.ts";
+type Run = (el: HTMLElement, settings: Record<string, unknown>, still: boolean) => void;
+/** Each behavior that has a script. */
+export declare const BEHAVIOR_RUNS: Partial<Record<BehaviorName, Run>>;
+/** The attribute naming an element's behavior, and the one holding its settings. */
+export declare const BEHAVIOR_ATTR = "data-kit-behavior";
+export declare const SETTINGS_ATTR = "data-kit-settings";
+/** The script a published page carries for one behavior: its own code and the starter, nothing else. */
+export declare function behaviorScript(name: BehaviorName): string | null;
+/** Starts every behavior on the page (CalOS's preview, still: nothing moves by itself). */
+export declare function startBehaviors(still: boolean): void;
+/** Asks whatever behavior holds this element to show it (a carousel's slide, a tab's panel, an accordion's item): the preview, when it's selected. */
+export declare function showWithin(el: Element): void;
+export {};

package/dist/behaviors/index.js

@@ -0,0 +1,78 @@
+import { accordion } from "./accordion.js";
+import { carousel } from "./carousel.js";
+import { countUp, marquee, reveal } from "./motion.js";
+import { tabs } from "./tabs.js";
+import { filter } from "./filter.js";
+/** Each behavior that has a script. */
+export const BEHAVIOR_RUNS = {
+    carousel: carousel,
+    tabs: tabs,
+    accordion: accordion,
+    marquee: marquee,
+    reveal: reveal,
+    "count-up": countUp,
+    filter: filter,
+};
+/** The attribute naming an element's behavior, and the one holding its settings. */
+export const BEHAVIOR_ATTR = "data-kit-behavior";
+export const SETTINGS_ATTR = "data-kit-settings";
+/**
+ * Starts every element of this behavior not started yet, now and as more are drawn. `still`: nothing
+ * moves by itself (CalOS's preview, so what's being edited stays put). Written to be sent as its own
+ * script as well as called here, so it uses nothing from outside itself but `run`.
+ */
+function start(name, run, still) {
+    const go = () => {
+        for (const el of Array.from(document.querySelectorAll(`[data-kit-behavior="${name}"]:not([data-kit-on])`))) {
+            el.setAttribute("data-kit-on", "");
+            let settings = {};
+            try {
+                settings = JSON.parse(el.getAttribute("data-kit-settings") || "{}");
+            }
+            catch {
+                // Settings the kit wrote can't be broken; the behavior's own defaults if they somehow are.
+            }
+            try {
+                run(el, settings, still);
+            }
+            catch (err) {
+                console.error(`site-kit: the ${name} behavior stopped`, err);
+            }
+        }
+    };
+    let queued = false;
+    const soon = () => {
+        if (queued)
+            return;
+        queued = true;
+        requestAnimationFrame(() => {
+            queued = false;
+            go();
+        });
+    };
+    const begin = () => {
+        go();
+        new MutationObserver(soon).observe(document.body, { childList: true, subtree: true });
+    };
+    // Loaded before the page is all there (an async script): it waits for the whole page, so a carousel isn't started with half its slides.
+    if (document.readyState === "loading")
+        document.addEventListener("DOMContentLoaded", begin, { once: true });
+    else
+        begin();
+}
+/** The script a published page carries for one behavior: its own code and the starter, nothing else. */
+export function behaviorScript(name) {
+    const run = BEHAVIOR_RUNS[name];
+    if (!run)
+        return null;
+    return `(()=>{const run=${run.toString()};(${start.toString()})(${JSON.stringify(name)},run,false);})();\n`;
+}
+/** Starts every behavior on the page (CalOS's preview, still: nothing moves by itself). */
+export function startBehaviors(still) {
+    for (const [name, run] of Object.entries(BEHAVIOR_RUNS))
+        start(name, run, still);
+}
+/** Asks whatever behavior holds this element to show it (a carousel's slide, a tab's panel, an accordion's item): the preview, when it's selected. */
+export function showWithin(el) {
+    el.dispatchEvent(new CustomEvent("kit:show", { bubbles: true }));
+}

package/dist/behaviors/motion.d.ts

@@ -0,0 +1,13 @@
+/** The kit draws the row twice in a track (data-kit-track, its copy data-kit-copy, hidden from screen readers); this moves it by one copy's width. */
+export declare function marquee(el: HTMLElement, s: {
+    seconds?: number;
+    reverse?: boolean;
+}, still: boolean): void;
+/** Hidden until it's scrolled to (sections.css, by its effect), then in; its children one after another where it staggers them. */
+export declare function reveal(el: HTMLElement, s: {
+    stagger?: number;
+}, still: boolean): void;
+/** The first number in its words ("$1,200+", "98%"), counted up from nothing, then left exactly as written. */
+export declare function countUp(el: HTMLElement, s: {
+    seconds?: number;
+}, still: boolean): void;

package/dist/behaviors/motion.js

@@ -0,0 +1,88 @@
+// The behaviors that only move things: a marquee (a row scrolling past without end), reveal (in as
+// it's scrolled to) and count-up (a number counting up to itself as it's scrolled to). Each does
+// nothing for someone who asked for less motion, and without scripting what they hold is simply
+// there: the row still (scrollable), everything shown, the number as written.
+//
+// Each self-contained: sent to visitors as its own script (./index.ts).
+/** The kit draws the row twice in a track (data-kit-track, its copy data-kit-copy, hidden from screen readers); this moves it by one copy's width. */
+export function marquee(el, s, still) {
+    const track = el.querySelector(":scope > [data-kit-track]");
+    const copy = track?.querySelector(":scope > [data-kit-copy]");
+    const first = track?.firstElementChild;
+    if (!track || !copy || !first || still || window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+        return;
+    // Styles set from script (the page's policy allows them): how far one round goes and how long it takes.
+    const measure = () => el.style.setProperty("--kit-marquee-shift", `${copy.offsetLeft - first.offsetLeft}px`);
+    measure();
+    el.style.setProperty("--kit-marquee-seconds", `${s.seconds ?? 30}s`);
+    if (s.reverse)
+        el.setAttribute("data-kit-reverse", "");
+    if (typeof ResizeObserver !== "undefined")
+        new ResizeObserver(measure).observe(track);
+    el.setAttribute("data-kit-ready", "");
+}
+/** Hidden until it's scrolled to (sections.css, by its effect), then in; its children one after another where it staggers them. */
+export function reveal(el, s, still) {
+    if (still || window.matchMedia("(prefers-reduced-motion: reduce)").matches || typeof IntersectionObserver === "undefined")
+        return;
+    if (s.stagger) {
+        el.setAttribute("data-kit-stagger", "");
+        Array.from(el.children).forEach((c, i) => (c.style.transitionDelay = `${i * s.stagger}ms`));
+    }
+    const o = new IntersectionObserver((entries) => {
+        if (!entries.some((e) => e.isIntersecting))
+            return;
+        el.setAttribute("data-kit-shown", "");
+        o.disconnect();
+    }, { rootMargin: "0px 0px -10% 0px" });
+    // Ready first (hidden), then watched: what's already on screen comes in at once.
+    el.setAttribute("data-kit-ready", "");
+    o.observe(el);
+}
+/** The first number in its words ("$1,200+", "98%"), counted up from nothing, then left exactly as written. */
+export function countUp(el, s, still) {
+    if (still || window.matchMedia("(prefers-reduced-motion: reduce)").matches || typeof IntersectionObserver === "undefined")
+        return;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    let text = null;
+    for (let t = walker.nextNode(); t; t = walker.nextNode()) {
+        if (/\d/.test(t.textContent ?? "")) {
+            text = t;
+            break;
+        }
+    }
+    if (!text)
+        return;
+    const written = text.textContent;
+    const m = /(\d[\d,]*)(\.\d+)?/.exec(written);
+    if (!m)
+        return;
+    const target = Number((m[1] + (m[2] ?? "")).replace(/,/g, ""));
+    const decimals = m[2] ? m[2].length - 1 : 0;
+    const commas = m[1].includes(",");
+    const format = (v) => {
+        const fixed = v.toFixed(decimals);
+        return commas ? fixed.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : fixed;
+    };
+    const node = text;
+    // Read out as written, not as it counts.
+    if (!el.hasAttribute("aria-label"))
+        el.setAttribute("aria-label", el.textContent?.trim() ?? written);
+    node.textContent = written.slice(0, m.index) + format(0) + written.slice(m.index + m[0].length);
+    const o = new IntersectionObserver((entries) => {
+        if (!entries.some((e) => e.isIntersecting))
+            return;
+        o.disconnect();
+        const start = performance.now();
+        const ms = (s.seconds ?? 1.2) * 1000;
+        const step = (now) => {
+            const t = Math.min(1, (now - start) / ms);
+            const eased = 1 - Math.pow(1 - t, 3);
+            node.textContent = t < 1 ? written.slice(0, m.index) + format(target * eased) + written.slice(m.index + m[0].length) : written;
+            if (t < 1)
+                requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    });
+    o.observe(el);
+}

package/dist/behaviors/tabs.d.ts

@@ -0,0 +1,3 @@
+export declare function tabs(el: HTMLElement, s: {
+    first?: number;
+}): void;

package/dist/behaviors/tabs.js

@@ -0,0 +1,55 @@
+// Tabs: the node's first child holds the tabs (one child for each panel), the children after it are
+// the panels, in the same order. A tab list, tabs and panels as a screen reader expects them (roles,
+// selected, controls), the arrow keys, Home and End moving between tabs. Without scripting every
+// panel shows, one after another, and the tabs don't (sections.css).
+//
+// Self-contained: sent to visitors as its own script (./index.ts). The kit marks the list
+// (data-kit-tablist) and the panels (data-kit-panel) (../next/built.tsx).
+export function tabs(el, s) {
+    const list = el.querySelector(":scope > [data-kit-tablist]");
+    const panels = Array.from(el.querySelectorAll(":scope > [data-kit-panel]"));
+    if (!list || !panels.length)
+        return;
+    const tabs = Array.from(list.children).slice(0, panels.length);
+    const key = Math.random().toString(36).slice(2, 8);
+    list.setAttribute("role", "tablist");
+    tabs.forEach((t, i) => {
+        t.id ||= `kit-tab-${key}-${i}`;
+        panels[i].id ||= `kit-panel-${key}-${i}`;
+        t.setAttribute("role", "tab");
+        t.setAttribute("aria-controls", panels[i].id);
+        panels[i].setAttribute("role", "tabpanel");
+        panels[i].setAttribute("aria-labelledby", t.id);
+        panels[i].tabIndex = 0;
+        t.addEventListener("click", (e) => {
+            e.preventDefault();
+            pick(i, false);
+        });
+        t.addEventListener("keydown", (e) => {
+            const to = e.key === "ArrowRight" || e.key === "ArrowDown" ? i + 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? i - 1 : e.key === "Home" ? 0 : e.key === "End" ? tabs.length - 1 : e.key === "Enter" || e.key === " " ? i : null;
+            if (to === null)
+                return;
+            e.preventDefault();
+            pick((to + tabs.length) % tabs.length, true);
+        });
+    });
+    function pick(i, focus) {
+        tabs.forEach((t, j) => {
+            const on = j === i;
+            t.setAttribute("aria-selected", String(on));
+            t.tabIndex = on ? 0 : -1;
+            t.toggleAttribute("data-active", on);
+            panels[j].hidden = !on;
+        });
+        if (focus)
+            tabs[i].focus();
+    }
+    // CalOS's preview asks for the panel holding what's selected to be shown.
+    el.addEventListener("kit:show", (e) => {
+        const i = panels.findIndex((p) => p.contains(e.target));
+        if (i >= 0)
+            pick(i, false);
+    });
+    pick(Math.min(s.first ?? 0, tabs.length - 1), false);
+    el.setAttribute("data-kit-ready", "");
+}

package/dist/built/css.d.ts

@@ -0,0 +1,2 @@
+/** The CSS for these classes (prefixed, as drawn), with the site's own colours (their slugs) as Tailwind colours. Empty for none. */
+export declare function builtCss(classes: Iterable<string>, swatches?: string[]): Promise<string>;

package/dist/built/css.js

@@ -0,0 +1,26 @@
+// Built sections' CSS at build: Tailwind v4's own compiler, given exactly the classes the prepared
+// content's trees use (./tree.ts), so the CSS holds those and nothing else; the theme from the Look
+// and no reset (./theme.ts). Node only: prepare runs it.
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import { compile } from "tailwindcss";
+import { tailwindInput } from "./theme.js";
+const require = createRequire(import.meta.url);
+/** Tailwind's own stylesheets (`tailwindcss/theme.css`, `tailwindcss/utilities.css`), from its package. */
+async function loadStylesheet(id, base) {
+    const name = id.startsWith("tailwindcss") ? id : `tailwindcss/${id.replace(/^\.\//, "")}`;
+    if (!/^tailwindcss\/(theme|utilities)(\.css)?$/.test(name))
+        throw new Error(`Built sections' CSS imports only Tailwind's theme and utilities, not ${id}`);
+    const path = require.resolve(name.endsWith(".css") ? name : `${name}.css`);
+    return { path, base: dirname(path) || base, content: await readFile(path, "utf8") };
+}
+/** The CSS for these classes (prefixed, as drawn), with the site's own colours (their slugs) as Tailwind colours. Empty for none. */
+export async function builtCss(classes, swatches = []) {
+    const list = [...classes];
+    if (!list.length)
+        return "";
+    const compiler = await compile(tailwindInput(swatches), { base: process.cwd(), loadStylesheet });
+    // Tailwind's banner comment names its version; the file's name carries its hash, so it's dropped.
+    return compiler.build(list).replace(/^\/\*![^*]*\*\/\n?/, "");
+}

package/dist/built/theme.d.ts

@@ -0,0 +1,19 @@
+/** What every built section's class carries on the page (the tree keeps it without). */
+export declare const PREFIX = "kit";
+/** A class of a tree as it's drawn: `md:p-4` → `kit:md:p-4`. */
+export declare const prefixed: (token: string) => string;
+/** The Look's colours by role, as Tailwind colours (`bg-brand`, `text-on-brand`, `border-line`), with what they fall back to on a site without a Look. */
+export declare const THEME_COLOURS: Record<string, string>;
+/** The Look's fonts: `font-display` and `font-heading` its headings', `font-body` and `font-text` its text's. */
+export declare const THEME_FONTS: Record<string, string>;
+/** The Look's type scale as text sizes (`text-h1`, `text-body`), each with its line height, tracking and weight. */
+export declare const THEME_TYPE: readonly ["display", "h1", "h2", "h3", "body", "small"];
+/** Its corners, width and spacing: `rounded-card`, `rounded-button`, `max-w-content`, `px-gutter`, `py-section`. */
+export declare const THEME_OTHER: Record<string, string>;
+/**
+ * The site's own colours' slugs, from the Look's values (lookVars: `--look-swatch-dark-sand`), each
+ * one a Tailwind colour by its slug (`bg-dark-sand`).
+ */
+export declare function swatchSlugs(look: Record<string, string> | undefined): string[];
+/** The Tailwind input for built sections: the theme and utilities only, prefixed, and the site's Look as tokens. */
+export declare function tailwindInput(swatches?: string[]): string;