@caltho/site-kit 0.2.11 → 0.3.0

package/dist/schema.js

@@ -3,6 +3,7 @@
 // check content with messages a person can act on, make a blank new item (a block, a list entry),
 // and find the kinds of block a site has. Also the checks that need no schema at all (pages, home,
 // links), and readable places in the content.
+import { allPages } from "./content/lists.js";
 const unions = (s) => s.anyOf ?? s.oneOf;
 /** Follows a `$ref` to its definition in the same document. */
 export function resolve(s, root) {
@@ -191,7 +192,8 @@ export function checkStructure(site) {
 /** Every link to a page of the site must land on one, and every link to a part of a page must have that part. */
 function linkIssues(site) {
     const issues = [];
-    const ids = new Map(site.pages.map((p) => [p.path, new Set(p.blocks.map((b) => b.id).filter(Boolean))]));
+    // A list's item pages are pages too (a link to /products/walnut-desk/ lands).
+    const ids = new Map(allPages(site).map((p) => [p.path, new Set(p.blocks.map((b) => b.id).filter(Boolean))]));
     const visit = (value, path, pagePath) => {
         if (Array.isArray(value))
             value.forEach((v, i) => visit(v, [...path, i], pagePath));

package/dist/sections/icons.d.ts

@@ -32,6 +32,8 @@ export declare const ICONS: {
     readonly camera: readonly ["M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z", "M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"];
     readonly play: readonly ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "m10 8 6 4-6 4z"];
     readonly "arrow-right": readonly ["M5 12h14M12 5l7 7-7 7"];
+    readonly menu: readonly ["M4 6h16M4 12h16M4 18h16"];
+    readonly "star-four": readonly ["M12 2C13.03 7.97 16.03 10.97 22 12C16.03 13.03 13.03 16.03 12 22C10.97 16.03 7.97 13.03 2 12C7.97 10.97 10.97 7.97 12 2Z"];
     readonly plus: readonly ["M12 5v14M5 12h14"];
     readonly minus: readonly ["M5 12h14"];
     readonly x: readonly ["M18 6 6 18M6 6l12 12"];

package/dist/sections/icons.js

@@ -37,6 +37,10 @@ export const ICONS = {
     camera: ["M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z", "M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"],
     play: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "m10 8 6 4-6 4z"],
     "arrow-right": ["M5 12h14M12 5l7 7-7 7"],
+    // A phone's menu button: three lines.
+    menu: ["M4 6h16M4 12h16M4 18h16"],
+    // A four-point star (a mark beside a link, a divider): drawn as a line like the others, solid with fill-current.
+    "star-four": ["M12 2C13.03 7.97 16.03 10.97 22 12C16.03 13.03 13.03 16.03 12 22C10.97 16.03 7.97 13.03 2 12C7.97 10.97 10.97 7.97 12 2Z"],
     plus: ["M12 5v14M5 12h14"],
     minus: ["M5 12h14"],
     x: ["M18 6 6 18M6 6l12 12"],

package/dist/sections/index.d.ts

@@ -51,22 +51,22 @@ export declare const parts: {
     readonly heading: z.ZodObject<{
         text: z.ZodString;
         size: z.ZodDefault<z.ZodEnum<{
-            display: "display";
             small: "small";
+            display: "display";
             medium: "medium";
             large: "large";
             page: "page";
         }>>;
         font: z.ZodOptional<z.ZodEnum<{
-            heading: "heading";
             text: "text";
+            heading: "heading";
         }>>;
     }, z.core.$strip>;
     readonly text: z.ZodObject<{
         text: z.ZodString;
         font: z.ZodOptional<z.ZodEnum<{
-            heading: "heading";
             text: "text";
+            heading: "heading";
         }>>;
     }, z.core.$strip>;
     readonly photo: z.ZodObject<{
@@ -101,8 +101,8 @@ export declare const parts: {
             text: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>;
         font: z.ZodOptional<z.ZodEnum<{
-            heading: "heading";
             text: "text";
+            heading: "heading";
         }>>;
         numbered: z.ZodDefault<z.ZodBoolean>;
         lines: z.ZodDefault<z.ZodBoolean>;
@@ -111,8 +111,8 @@ export declare const parts: {
         text: z.ZodString;
         who: z.ZodOptional<z.ZodString>;
         font: z.ZodOptional<z.ZodEnum<{
-            heading: "heading";
             text: "text";
+            heading: "heading";
         }>>;
     }, z.core.$strip>;
     readonly stats: z.ZodObject<{
@@ -163,15 +163,18 @@ export declare const parts: {
     }, z.core.$strip>;
     readonly icon: z.ZodObject<{
         name: z.ZodEnum<{
-            card: "card";
-            check: "check";
-            phone: "phone";
             file: "file";
-            home: "home";
-            play: "play";
-            x: "x";
+            check: "check";
             search: "search";
             link: "link";
+            tag: "tag";
+            menu: "menu";
+            play: "play";
+            x: "x";
+            card: "card";
+            phone: "phone";
+            home: "home";
+            list: "list";
             calendar: "calendar";
             clock: "clock";
             users: "users";
@@ -196,13 +199,12 @@ export declare const parts: {
             globe: "globe";
             camera: "camera";
             "arrow-right": "arrow-right";
+            "star-four": "star-four";
             plus: "plus";
             minus: "minus";
             info: "info";
             warning: "warning";
-            list: "list";
             grid: "grid";
-            tag: "tag";
             award: "award";
         }>;
         size: z.ZodDefault<z.ZodEnum<{
@@ -241,10 +243,10 @@ export declare const own: z.ZodObject<{
         center: "center";
     }>>;
     tone: z.ZodDefault<z.ZodEnum<{
+        dark: "dark";
         soft: "soft";
         plain: "plain";
         brand: "brand";
-        dark: "dark";
     }>>;
     shape: z.ZodDefault<z.ZodEnum<{
         card: "card";
@@ -270,7 +272,11 @@ export declare const own: z.ZodObject<{
         parts: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">>;
     }, z.core.$strip>>;
 }, z.core.$strip>;
-/** Every section the kit draws, by the type a block names. */
+/**
+ * Every section the kit draws, by the type a block names. `built`: a tree of elements styled with
+ * Tailwind, made in CalOS's editor or by Cal (../tree, cal-os docs/design/site-builder.md); `use`:
+ * one of the site's components (a tree kept once in the content's `components`) with its slots filled.
+ */
 export declare const sections: {
     readonly gallery: z.ZodObject<{
         heading: z.ZodOptional<z.ZodString>;
@@ -322,10 +328,10 @@ export declare const sections: {
             center: "center";
         }>>;
         tone: z.ZodDefault<z.ZodEnum<{
+            dark: "dark";
             soft: "soft";
             plain: "plain";
             brand: "brand";
-            dark: "dark";
         }>>;
         shape: z.ZodDefault<z.ZodEnum<{
             card: "card";
@@ -351,6 +357,22 @@ export declare const sections: {
             parts: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">>;
         }, z.core.$strip>>;
     }, z.core.$strip>;
+    readonly built: z.ZodObject<{
+        name: z.ZodOptional<z.ZodString>;
+        root: z.ZodType<import("../tree/index.ts").Node, unknown, z.core.$ZodTypeInternals<import("../tree/index.ts").Node, unknown>>;
+    }, z.core.$strip>;
+    readonly use: z.ZodObject<{
+        component: z.ZodString;
+        slots: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodObject<{
+            text: z.ZodOptional<z.ZodString>;
+            href: z.ZodOptional<z.ZodString>;
+            image: z.ZodOptional<z.ZodObject<{
+                src: z.ZodString;
+                alt: z.ZodDefault<z.ZodString>;
+                phoneSrc: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>;
 };
 export type KitSectionType = keyof typeof sections;
 export declare const isKitSection: (type: string) => type is KitSectionType;

package/dist/sections/index.js

@@ -6,6 +6,7 @@ import { buttonStyleName } from "../content/look.js";
 import { z } from "zod";
 import { href, image, md, text } from "../content/index.js";
 import { ICON_NAMES } from "./icons.js";
+import { built, use } from "../tree/index.js";
 export { ICON_NAMES, ICONS } from "./icons.js";
 /** Photos in a grid, each with a caption if it has one: their work, the place, the team at it. */
 export const gallery = z
@@ -183,8 +184,12 @@ export const own = z
         .meta({ title: "Columns' parts" }),
 })
     .meta({ title: "Your own section", description: "Put together from headings, text, photos, buttons and more, in the site's design" });
-/** Every section the kit draws, by the type a block names. */
-export const sections = { gallery, slideshow, own };
+/**
+ * Every section the kit draws, by the type a block names. `built`: a tree of elements styled with
+ * Tailwind, made in CalOS's editor or by Cal (../tree, cal-os docs/design/site-builder.md); `use`:
+ * one of the site's components (a tree kept once in the content's `components`) with its slots filled.
+ */
+export const sections = { gallery, slideshow, own, built, use };
 export const isKitSection = (type) => Object.prototype.hasOwnProperty.call(sections, type);
 /** Ready-made sections of the business's own, to add and then edit like any other (./presets.ts). */
 export { presets } from "./presets.js";

package/dist/sections.css

@@ -1575,3 +1575,327 @@
 .kit-btn:hover {
   filter: brightness(0.94);
 }
+
+/*
+ * Built sections (./next/built.tsx): their looks are their own Tailwind classes, in the CSS made for
+ * them at build (./built/css.ts). Here only what the kit draws around them: an icon's size until its
+ * classes say otherwise, and what each behavior needs. Without scripting, a behavior's content is
+ * simply there: a carousel's first slide (no controls), every tab's panel (no tabs), every accordion
+ * item open, a marquee's row still and scrollable, everything revealed.
+ */
+:where(.kit-built-icon) {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}
+/* A component used that the site doesn't have (in CalOS's preview only): a quiet box where it goes. */
+.kit-built-missing {
+  min-height: 120px;
+  margin: 16px var(--look-gutter, 20px);
+  border: 1px dashed var(--look-line, #ddd);
+  border-radius: var(--look-radius, 8px);
+}
+
+/*
+ * Inside a built section (a tree styled with Tailwind) an element starts plain, as Tailwind's own
+ * reset has it: a link takes the words' colour with no underline, words and lists have no margins and
+ * no bullets, so what it looks like is what its classes say, not the site's own styles for its pages.
+ * Each rule is as strong as one class (:is with a class that's never used), so it beats the site's
+ * rules for a tag (a, p) and any class of the tree, drawn after it, beats it.
+ */
+:where([data-kit-built]) :is(a, .kit-plain) {
+  color: inherit;
+  text-decoration: inherit;
+}
+:where([data-kit-built]) :is(h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol, dl, dd, .kit-plain) {
+  margin: 0;
+}
+:where([data-kit-built]) :is(ul, ol, .kit-plain) {
+  list-style: none;
+  padding: 0;
+}
+:where([data-kit-built]) :is(button, .kit-plain) {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+/* Carousel: the slides stacked in one place, the one showing faded in; or side by side, moved along. */
+:where([data-kit-behavior="carousel"] > [data-kit-track]) {
+  display: grid;
+}
+:where([data-kit-track][data-kit-transition="fade"] > [data-kit-slide]) {
+  grid-area: 1 / 1;
+  transition:
+    opacity 0.6s ease,
+    visibility 0.6s;
+}
+[data-kit-track][data-kit-transition="fade"] > [data-kit-slide]:not([data-active]) {
+  opacity: 0;
+  visibility: hidden;
+}
+[data-kit-track][data-kit-transition="slide"] {
+  display: flex;
+  overflow: hidden;
+}
+:where([data-kit-track][data-kit-transition="slide"] > [data-kit-slide]) {
+  flex: 0 0 100%;
+  min-width: 0;
+  transition:
+    transform 0.5s ease,
+    visibility 0.5s;
+}
+[data-kit-track][data-kit-transition="slide"] > [data-kit-slide]:not([data-active]) {
+  visibility: hidden;
+}
+[data-kit-behavior="carousel"]:not([data-kit-ready]) > [data-kit-track] > [data-kit-slide]:not([data-active]) {
+  display: none;
+}
+[data-kit-behavior="carousel"]:not([data-kit-ready]) :is([data-kit-to], [data-kit-prev], [data-kit-next], [data-kit-pause], .kit-carousel-controls) {
+  display: none;
+}
+.kit-carousel-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 16px;
+}
+/* A dot is a 24px target, the dot drawn small inside it. */
+.kit-carousel-dot {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+.kit-carousel-dot::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.3;
+}
+.kit-carousel-dot[aria-current="true"]::before {
+  opacity: 1;
+}
+.kit-carousel-arrow,
+.kit-carousel-pause {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--look-line, color-mix(in srgb, currentColor 18%, transparent));
+  border-radius: 999px;
+  padding: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+.kit-carousel-prev svg {
+  transform: scaleX(-1);
+}
+/* Pause: two bars; stopped, a play triangle. */
+.kit-carousel-pause span {
+  width: 10px;
+  height: 12px;
+  border-inline: 3px solid currentColor;
+}
+.kit-carousel-pause[data-stopped] span {
+  width: 0;
+  height: 0;
+  border-inline: 0;
+  border-left: 10px solid currentColor;
+  border-block: 6px solid transparent;
+  margin-left: 3px;
+}
+:is(.kit-carousel-dot, .kit-carousel-arrow, .kit-carousel-pause):focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* A design's own stop button (a carousel's pause slot): the same bars, then a play triangle, in whatever box it draws. */
+[data-kit-pause-icon] {
+  display: block;
+  width: 10px;
+  height: 12px;
+  border-inline: 3px solid currentColor;
+}
+[data-kit-pause][data-stopped] [data-kit-pause-icon] {
+  width: 0;
+  height: 0;
+  border-inline: 0;
+  border-left: 10px solid currentColor;
+  border-block: 6px solid transparent;
+  margin-left: 3px;
+}
+
+/* A built form's spam trap: off-screen for people (and screen readers), there for bots that fill every box. */
+.kit-trap {
+  position: absolute !important;
+  left: -10000px !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+/* A filter's items not chosen: hidden, whatever their own classes say. */
+[data-kit-behavior="filter"] [data-kit-filter-value][hidden] {
+  display: none !important;
+}
+
+/* Tabs and accordions: what isn't chosen is hidden, whatever its own classes say. */
+[data-kit-behavior="tabs"]:not([data-kit-ready]) > [data-kit-tablist] {
+  display: none;
+}
+[data-kit-behavior="tabs"] > [data-kit-panel][hidden],
+[data-kit-behavior="accordion"] > [data-kit-item] > [data-kit-body][hidden] {
+  display: none;
+}
+[data-kit-behavior="tabs"][data-kit-ready] > [data-kit-tablist] > *,
+[data-kit-behavior="accordion"][data-kit-ready] > [data-kit-item] > [data-kit-head] {
+  cursor: pointer;
+}
+
+/* Marquee: its row twice, moved by one row's width, again and again; still, it can be scrolled. */
+[data-kit-behavior="marquee"] {
+  overflow-x: auto;
+}
+[data-kit-behavior="marquee"][data-kit-ready] {
+  overflow: hidden;
+}
+.kit-marquee-track {
+  display: flex;
+  width: max-content;
+  gap: inherit;
+  align-items: inherit;
+}
+.kit-marquee-group {
+  display: flex;
+  flex-shrink: 0;
+  gap: inherit;
+  align-items: inherit;
+}
+[data-kit-behavior="marquee"]:not([data-kit-ready]) [data-kit-copy] {
+  display: none;
+}
+@keyframes kit-marquee {
+  to {
+    transform: translateX(calc(-1 * var(--kit-marquee-shift, 50%)));
+  }
+}
+
+/* Reveal: from below, a side, small or faded, as it's scrolled to; its children one after another where it staggers them. */
+[data-kit-effect="up"] {
+  --kit-reveal-from: translateY(24px);
+}
+[data-kit-effect="left"] {
+  --kit-reveal-from: translateX(-24px);
+}
+[data-kit-effect="right"] {
+  --kit-reveal-from: translateX(24px);
+}
+[data-kit-effect="zoom"] {
+  --kit-reveal-from: scale(0.96);
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-kit-behavior="marquee"][data-kit-ready] > .kit-marquee-track {
+    animation: kit-marquee var(--kit-marquee-seconds, 30s) linear infinite;
+  }
+  [data-kit-behavior="marquee"][data-kit-reverse] > .kit-marquee-track {
+    animation-direction: reverse;
+  }
+  [data-kit-behavior="marquee"][data-kit-ready]:is(:hover, :focus-within) > .kit-marquee-track {
+    animation-play-state: paused;
+  }
+  [data-kit-behavior="reveal"][data-kit-ready]:not([data-kit-stagger]),
+  [data-kit-behavior="reveal"][data-kit-ready][data-kit-stagger] > * {
+    transition:
+      opacity 0.7s ease,
+      transform 0.7s ease;
+  }
+  [data-kit-behavior="reveal"][data-kit-ready]:not([data-kit-shown]):not([data-kit-stagger]),
+  [data-kit-behavior="reveal"][data-kit-ready][data-kit-stagger]:not([data-kit-shown]) > * {
+    opacity: 0;
+    transform: var(--kit-reveal-from, none);
+  }
+}
+@media print {
+  [data-kit-behavior="reveal"] > *,
+  [data-kit-behavior="reveal"] {
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}
+
+/* The cookie banner (the site's consent setting): over the page, along an edge or in a corner, until a choice is made. */
+.kit-consent {
+  position: fixed;
+  z-index: 60;
+  inset-inline: 0;
+  bottom: 0;
+  padding: 12px var(--look-gutter, 20px);
+}
+.kit-consent[hidden] {
+  display: none;
+}
+.kit-consent-top {
+  top: 0;
+  bottom: auto;
+}
+.kit-consent-bottom-left,
+.kit-consent-bottom-right {
+  inset-inline: auto;
+  max-width: min(420px, 100% - 24px);
+  padding: 12px;
+}
+.kit-consent-bottom-left {
+  left: 0;
+}
+.kit-consent-bottom-right {
+  right: 0;
+}
+.kit-consent-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px 24px;
+  max-width: var(--look-width, 1200px);
+  margin-inline: auto;
+  padding: 16px 20px;
+  border: 1px solid var(--look-line, #ddd);
+  border-radius: var(--look-radius, 8px);
+  background: var(--look-page, #fff);
+  color: var(--look-ink, #111);
+  box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
+}
+.kit-consent-text {
+  flex: 1 1 280px;
+  font-size: var(--look-type-small-size, 14px);
+}
+.kit-consent-text > :first-child {
+  margin-top: 0;
+}
+.kit-consent-text > :last-child {
+  margin-bottom: 0;
+}
+.kit-consent-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+}
+.kit-consent-policy {
+  font-size: var(--look-type-small-size, 14px);
+  color: inherit;
+}

package/dist/seo.js

@@ -1,6 +1,7 @@
 // What search engines and browsers read about a site besides its words: the structured data
 // (schema.org) describing the business, robots.txt, and the files Cloudflare Pages reads for
 // response headers and redirects. Everything here is worked out from the site's content.
+import { allPages } from "./content/lists.js";
 import { clock } from "./content/index.js";
 /** The page's address as search engines should know it. */
 export function canonical(site, path) {
@@ -96,7 +97,7 @@ export function robotsTxt(site) {
 }
 /** Every page search engines should list, at its canonical address. */
 export function sitemapXml(site) {
-    const urls = site.pages.filter((p) => !p.noindex).map((p) => `  <url><loc>${canonical(site, p.path)}</loc></url>`);
+    const urls = allPages(site).filter((p) => !p.noindex).map((p) => `  <url><loc>${canonical(site, p.path)}</loc></url>`);
     return `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${urls.join("\n")}\n</urlset>\n`;
 }
 /** Where CalOS's preview draws a draft (./next/preview.tsx): framed by CalOS, never indexed. */

package/dist/tree/behaviors.d.ts

@@ -0,0 +1,50 @@
+import { z } from "zod";
+export declare const BEHAVIORS: readonly ["carousel", "tabs", "accordion", "marquee", "reveal", "count-up", "sticky", "filter"];
+export type BehaviorName = (typeof BEHAVIORS)[number];
+/**
+ * The settings of each. `slides` and the like name which children are the moving parts: by default a
+ * carousel's slides are its node's children; `controls` lets a carousel's dots and arrows be drawn
+ * from its own design (nodes marked with a `slot`: "prev", "next", "dots").
+ */
+export declare const behavior: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    name: z.ZodLiteral<"carousel">;
+    seconds: z.ZodOptional<z.ZodNumber>;
+    transition: z.ZodDefault<z.ZodEnum<{
+        fade: "fade";
+        slide: "slide";
+    }>>;
+    pauseOnHover: z.ZodDefault<z.ZodBoolean>;
+    dots: z.ZodDefault<z.ZodBoolean>;
+    arrows: z.ZodDefault<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"tabs">;
+    first: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"accordion">;
+    single: z.ZodDefault<z.ZodBoolean>;
+    open: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"marquee">;
+    seconds: z.ZodDefault<z.ZodNumber>;
+    reverse: z.ZodDefault<z.ZodBoolean>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"reveal">;
+    effect: z.ZodDefault<z.ZodEnum<{
+        fade: "fade";
+        up: "up";
+        left: "left";
+        right: "right";
+        zoom: "zoom";
+    }>>;
+    stagger: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"count-up">;
+    seconds: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"filter">;
+    field: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    name: z.ZodLiteral<"sticky">;
+    top: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strip>], "name">;
+export type Behavior = z.infer<typeof behavior>;

package/dist/tree/behaviors.js

@@ -0,0 +1,67 @@
+// What a built section's elements can do beyond being drawn: the kit's own small scripts, chosen by
+// name with settings, never written by a business. Visitors get static HTML; a behavior adds its
+// script only on a page that uses it, and does nothing harmful where scripting is off (the first
+// slide shown, every accordion item readable).
+import { z } from "zod";
+export const BEHAVIORS = ["carousel", "tabs", "accordion", "marquee", "reveal", "count-up", "sticky", "filter"];
+/**
+ * The settings of each. `slides` and the like name which children are the moving parts: by default a
+ * carousel's slides are its node's children; `controls` lets a carousel's dots and arrows be drawn
+ * from its own design (nodes marked with a `slot`: "prev", "next", "dots").
+ */
+export const behavior = z.discriminatedUnion("name", [
+    z.object({
+        name: z.literal("carousel"),
+        /** Seconds on each slide; none: only on a click. Never moves for visitors who asked for less motion. */
+        seconds: z.number().int().min(2).max(30).optional(),
+        /** Fade between slides, or slide sideways. */
+        transition: z.enum(["fade", "slide"]).default("fade"),
+        /** Pauses while the pointer is over it. */
+        pauseOnHover: z.boolean().default(true),
+        /** Draws its own dots and arrows (the kit's), where the design has none marked as slots. */
+        dots: z.boolean().default(true),
+        arrows: z.boolean().default(false),
+    }),
+    z.object({
+        name: z.literal("tabs"),
+        /** The tab shown first, by its place. */
+        first: z.number().int().min(0).max(20).default(0),
+    }),
+    z.object({
+        name: z.literal("accordion"),
+        /** Only one item open at a time. */
+        single: z.boolean().default(false),
+        /** The item open at first, by its place; none: all closed. */
+        open: z.number().int().min(0).max(50).optional(),
+    }),
+    z.object({
+        name: z.literal("marquee"),
+        seconds: z.number().int().min(5).max(120).default(30),
+        reverse: z.boolean().default(false),
+    }),
+    z.object({
+        name: z.literal("reveal"),
+        /** How it comes in as it's scrolled to; nothing for visitors who asked for less motion. */
+        effect: z.enum(["fade", "up", "left", "right", "zoom"]).default("up"),
+        /** Its children one after another, this many milliseconds apart. */
+        stagger: z.number().int().min(0).max(1000).default(0),
+    }),
+    z.object({
+        name: z.literal("count-up"),
+        /** Counts up to its words' number when scrolled to. */
+        seconds: z.number().min(0.3).max(5).default(1.2),
+    }),
+    z.object({
+        name: z.literal("filter"),
+        /**
+         * The field of the list repeated inside it that its buttons choose by: each button inside it (not in
+         * an item) shows the items whose field matches its words ("Real estate" is real-estate), "All" every one.
+         */
+        field: z.string().regex(/^[\w-]{1,60}$/),
+    }),
+    z.object({
+        name: z.literal("sticky"),
+        /** Stays this far from the top while its section scrolls past. */
+        top: z.number().int().min(0).max(400).default(0),
+    }),
+]);