@caltho/site-kit 0.2.9 → 0.2.10

package/README.md

@@ -74,6 +74,12 @@ them in its editor like the site's own, and Cal can add one. Today: **gallery**
 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).
 
+**Your own section** (`own`) is built in CalOS rather than in code: one to four columns (or a wide one
+beside a narrow one), each a list of parts (heading, text, photo, button, list, quote, facts in a row,
+price, photos in a grid, slideshow, space), left or centred, plain or in the brand colour. Its parts
+wear the site's own classes, so what's built looks like the site. One that's wanted again is saved by
+name in the content's `saved` list, and CalOS offers it beside the site's own kinds.
+
 `Slideshow` (from `@caltho/site-kit/next`) is also a building block a site's own sections use: SCV's
 hero moves through its photos behind its words with `<Slideshow fill label="…">{photos}</Slideshow>`.
 It waits while it's off screen, pointed at or focused, never moves for someone who's asked for less
@@ -96,7 +102,7 @@ import "@caltho/site-kit/sections.css";
 
 From then on each section the kit adds reaches the site with `cal sites kit update`. They're themed by
 the site's Look (`--look-*`); a site with a design of its own gives its own classes so they sit in
-it like its own: `<KitSection s={block} classes={{ section: "", wrap: "mx-auto max-w-5xl px-4 py-12", heading: "font-display text-3xl" }} />`.
+it like its own: `<KitSection s={block} classes={{ section: "", wrap: "mx-auto max-w-5xl px-4 py-12", heading: "font-display text-3xl", text: "…", button: "…", buttonQuiet: "…" }} />`.
 
 ## Share cards
 

package/dist/content/index.d.ts

@@ -242,6 +242,10 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
             shareText: z.ZodOptional<z.ZodString>;
             noindex: z.ZodDefault<z.ZodBoolean>;
         }, z.core.$strip>>;
+        saved: z.ZodDefault<z.ZodArray<z.ZodObject<{
+            name: z.ZodString;
+            block: z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">;
+        }, z.core.$strip>>>;
         look?: z.ZodOptional<z.ZodObject<{
             brand: z.ZodDefault<z.ZodString>;
             accent: z.ZodDefault<z.ZodString>;
@@ -359,6 +363,10 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                 shareText: z.ZodOptional<z.ZodString>;
                 noindex: z.ZodDefault<z.ZodBoolean>;
             }, z.core.$strip>>;
+            saved: z.ZodDefault<z.ZodArray<z.ZodObject<{
+                name: z.ZodString;
+                block: z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">;
+            }, z.core.$strip>>>;
             look?: z.ZodOptional<z.ZodObject<{
                 brand: z.ZodDefault<z.ZodString>;
                 accent: z.ZodDefault<z.ZodString>;

package/dist/content/index.js

@@ -172,6 +172,12 @@ export function defineSite(blocks, o = {}) {
         ...(o.look ? { look: lookSchema(o.look) } : {}),
         ...o.extend,
         pages: z.array(page).min(1),
+        /** Sections the business put together and named, to add again anywhere ("Package card"): CalOS offers them beside the site's own kinds. */
+        saved: z
+            .array(z.object({ name: text.meta({ title: "Name" }), block: union }))
+            .max(30)
+            .default([])
+            .meta({ title: "Saved sections" }),
     })
         .superRefine((site, ctx) => {
         const s = site;

package/dist/next/sections.d.ts

@@ -3,11 +3,17 @@ export type KitBlock = {
     id?: string;
     placement?: Record<string, unknown>;
 } & Record<string, unknown>;
-/** The site's own classes for a kit section's parts, each in place of the kit's: its band, its container, its heading. */
+/**
+ * The site's own classes for a kit section's parts, each in place of the kit's: its band, its
+ * container, its heading, its words, and its buttons (the main one and a quieter one).
+ */
 export type KitClasses = {
     section?: string;
     wrap?: string;
     heading?: string;
+    text?: string;
+    button?: string;
+    buttonQuiet?: string;
 };
 /** A block of one of the kit's types, drawn; null for any other (the site's own to draw). */
 export declare function KitSection({ s, level, classes }: {

package/dist/next/sections.js

@@ -11,6 +11,8 @@ export function KitSection({ s, level = 2, classes = {} }) {
             return _jsx(Gallery, { s: s, level: level, classes: classes });
         case "slideshow":
             return _jsx(Slides, { s: s, level: level, classes: classes });
+        case "own":
+            return _jsx(Own, { s: s, level: level, classes: classes });
         default:
             return null;
     }
@@ -36,3 +38,50 @@ function Slides({ s, level, classes }) {
     const headingId = s.heading ? `${s.id ?? "slideshow"}-heading` : undefined;
     return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-slideshow", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap ?? "kit-wrap", children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.heading ?? "kit-heading", children: s.heading })), _jsx(Slideshow, { label: s.heading ?? "Photos", seconds: s.seconds, className: SLIDE_RATIO[s.shape ?? "wide"], children: s.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: "(min-width: 1200px) 1200px, 100vw", eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) })] }) }));
 }
+const SHAPE = { "as-taken": undefined, landscape: "4/3", square: "1/1", portrait: "4/5" };
+const COLUMNS = { one: 1, two: 2, three: 3, four: 4, "wide-left": 2, "wide-right": 2 };
+/**
+ * A section of the business's own: its columns of parts, laid out as chosen, each part in the site's
+ * own classes where it gave them and the kit's otherwise. A heading is the page's next level down.
+ */
+function Own({ s, level, classes }) {
+    const n = COLUMNS[s.layout ?? "one"] ?? 1;
+    const columns = s.columns.slice(0, n);
+    return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-own", `kit-own-${s.tone ?? "plain"}`, placementClass(s)].filter(Boolean).join(" "), id: s.id, children: _jsx("div", { className: classes.wrap ?? "kit-wrap", children: _jsx("div", { className: `kit-own-grid kit-own-${s.layout ?? "one"} kit-own-align-${s.align ?? "left"}`, children: columns.map((c, i) => (_jsx("div", { className: "kit-own-column", children: c.parts.map((p, j) => (_jsx(OwnPart, { p: p, level: level, classes: classes, columns: n }, j))) }, i))) }) }) }));
+}
+function OwnPart({ p, level, classes, columns }) {
+    const width = `(min-width: 1024px) ${Math.round(100 / columns)}vw, 100vw`;
+    switch (p.type) {
+        case "heading": {
+            // Large is the section's own heading level; medium and small the levels under it.
+            const at = level + (p.size === "large" ? 0 : p.size === "small" ? 2 : 1);
+            return (_jsx(Heading, { level: at, className: [classes.heading ?? "kit-heading", `kit-own-h-${p.size ?? "medium"}`].join(" "), children: p.text }));
+        }
+        case "text":
+            return _jsx(Md, { text: p.text, top: level + 1, className: ["kit-own-text", classes.text].filter(Boolean).join(" ") });
+        case "photo":
+            return (_jsxs("figure", { className: "kit-own-photo", children: [_jsx(Img, { src: p.image.src, alt: p.image.alt, sizes: width, ratio: SHAPE[p.shape ?? "as-taken"] }), p.image.caption && _jsx("figcaption", { children: p.image.caption })] }));
+        case "button": {
+            const quiet = p.style === "quiet";
+            return (_jsx("p", { className: "kit-own-action", children: _jsx("a", { href: p.href, className: (quiet ? classes.buttonQuiet : classes.button) ?? (quiet ? "kit-button kit-button-quiet" : "kit-button"), children: p.label }) }));
+        }
+        case "list": {
+            const L = p.style === "numbers" ? "ol" : "ul";
+            return (_jsx(L, { className: ["kit-own-list", `kit-own-list-${p.style ?? "bullets"}`, classes.text].filter(Boolean).join(" "), children: p.items.map((item, i) => (_jsx("li", { children: item }, i))) }));
+        }
+        case "quote":
+            return (_jsxs("figure", { className: "kit-own-quote", children: [_jsx("blockquote", { className: classes.text, children: p.text }), p.who && _jsx("figcaption", { children: p.who })] }));
+        case "stats":
+            return (_jsx("dl", { className: "kit-own-stats", children: p.items.map((it, i) => (_jsxs("div", { children: [_jsx("dt", { children: it.label }), _jsx("dd", { children: it.value })] }, i))) }));
+        case "price":
+            return (_jsxs("p", { className: "kit-own-price", children: [_jsx("span", { className: "kit-own-amount", children: p.amount }), p.per && _jsxs("span", { className: "kit-own-per", children: [" ", p.per] }), p.note && _jsx("span", { className: "kit-own-note", children: p.note })] }));
+        case "gallery": {
+            const n = Number(p.columns ?? "3");
+            return (_jsx("ul", { className: `kit-gallery-grid kit-cols-${n}`, children: p.images.map((img) => (_jsx("li", { children: _jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: `(min-width: 1024px) ${Math.round(100 / (n * columns))}vw, 50vw`, ratio: "1/1" }), img.caption && _jsx("figcaption", { children: img.caption })] }) }, img.src))) }));
+        }
+        case "slideshow":
+            return (_jsx(Slideshow, { label: "Photos", seconds: p.seconds, className: "kit-shape-landscape", children: p.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: width, eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) }));
+        case "space":
+            return _jsx("div", { "aria-hidden": "true", className: `kit-own-space kit-own-space-${p.size ?? "medium"}` });
+    }
+}

package/dist/sections/index.d.ts

@@ -35,6 +35,113 @@ export declare const slideshow: z.ZodObject<{
     }>>;
     seconds: z.ZodDefault<z.ZodNumber>;
 }, z.core.$strip>;
+export declare const parts: {
+    readonly heading: z.ZodObject<{
+        text: z.ZodString;
+        size: z.ZodDefault<z.ZodEnum<{
+            small: "small";
+            large: "large";
+            medium: "medium";
+        }>>;
+    }, z.core.$strip>;
+    readonly text: z.ZodObject<{
+        text: z.ZodString;
+    }, z.core.$strip>;
+    readonly photo: z.ZodObject<{
+        image: z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>;
+        shape: z.ZodDefault<z.ZodEnum<{
+            square: "square";
+            landscape: "landscape";
+            portrait: "portrait";
+            "as-taken": "as-taken";
+        }>>;
+    }, z.core.$strip>;
+    readonly button: z.ZodObject<{
+        label: z.ZodString;
+        href: z.ZodString;
+        style: z.ZodDefault<z.ZodEnum<{
+            main: "main";
+            quiet: "quiet";
+        }>>;
+    }, z.core.$strip>;
+    readonly list: z.ZodObject<{
+        items: z.ZodArray<z.ZodString>;
+        style: z.ZodDefault<z.ZodEnum<{
+            checks: "checks";
+            bullets: "bullets";
+            numbers: "numbers";
+        }>>;
+    }, z.core.$strip>;
+    readonly quote: z.ZodObject<{
+        text: z.ZodString;
+        who: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    readonly stats: z.ZodObject<{
+        items: z.ZodArray<z.ZodObject<{
+            value: z.ZodString;
+            label: z.ZodString;
+        }, z.core.$strip>>;
+    }, z.core.$strip>;
+    readonly price: z.ZodObject<{
+        amount: z.ZodString;
+        per: z.ZodOptional<z.ZodString>;
+        note: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    readonly gallery: z.ZodObject<{
+        images: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        columns: z.ZodDefault<z.ZodEnum<{
+            2: "2";
+            3: "3";
+            4: "4";
+        }>>;
+    }, z.core.$strip>;
+    readonly slideshow: z.ZodObject<{
+        images: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        seconds: z.ZodDefault<z.ZodNumber>;
+    }, z.core.$strip>;
+    readonly space: z.ZodObject<{
+        size: z.ZodDefault<z.ZodEnum<{
+            small: "small";
+            large: "large";
+            medium: "medium";
+        }>>;
+    }, z.core.$strip>;
+};
+export type PartType = keyof typeof parts;
+/** A section of the business's own: columns of parts, laid out as chosen, in the site's design. */
+export declare const own: z.ZodObject<{
+    layout: z.ZodDefault<z.ZodEnum<{
+        one: "one";
+        two: "two";
+        three: "three";
+        four: "four";
+        "wide-left": "wide-left";
+        "wide-right": "wide-right";
+    }>>;
+    align: z.ZodDefault<z.ZodEnum<{
+        left: "left";
+        center: "center";
+    }>>;
+    tone: z.ZodDefault<z.ZodEnum<{
+        brand: "brand";
+        plain: "plain";
+    }>>;
+    columns: z.ZodArray<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. */
 export declare const sections: {
     readonly gallery: z.ZodObject<{
@@ -71,6 +178,27 @@ export declare const sections: {
         }>>;
         seconds: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strip>;
+    readonly own: z.ZodObject<{
+        layout: z.ZodDefault<z.ZodEnum<{
+            one: "one";
+            two: "two";
+            three: "three";
+            four: "four";
+            "wide-left": "wide-left";
+            "wide-right": "wide-right";
+        }>>;
+        align: z.ZodDefault<z.ZodEnum<{
+            left: "left";
+            center: "center";
+        }>>;
+        tone: z.ZodDefault<z.ZodEnum<{
+            brand: "brand";
+            plain: "plain";
+        }>>;
+        columns: z.ZodArray<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>;
 };
 export type KitSectionType = keyof typeof sections;
 export declare const isKitSection: (type: string) => type is KitSectionType;

package/dist/sections/index.js

@@ -3,7 +3,7 @@
 // styled by sections.css, themed by the site's Look. A site takes them all into its blocks
 // (`defineSite({ ...blocks, ...sections })`); one of its own by the same name is kept over the kit's.
 import { z } from "zod";
-import { image, md, text } from "../content/index.js";
+import { href, image, md, text } from "../content/index.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
     .object({
@@ -31,6 +31,39 @@ export const slideshow = z
     seconds: z.number().int().min(3).max(15).default(5).meta({ title: "Seconds on each photo" }),
 })
     .meta({ title: "Slideshow", description: "Photos one at a time, fading from one to the next" });
+/**
+ * The parts a section of the business's own is put together from in CalOS: each drawn in the site's
+ * own type, buttons and widths (the classes it gives KitSection), so what's built looks like the
+ * site, not a template. A fixed set, no colours or fonts of their own.
+ */
+const photo = image.extend({ caption: text.optional().meta({ title: "Caption" }) });
+export const parts = {
+    heading: z.object({ text, size: z.enum(["large", "medium", "small"]).default("medium").meta({ title: "Size" }) }).meta({ title: "Heading" }),
+    text: z.object({ text: md }).meta({ title: "Text" }),
+    photo: z.object({ image: photo, shape: z.enum(["as-taken", "landscape", "square", "portrait"]).default("as-taken").meta({ title: "Shape" }) }).meta({ title: "Photo" }),
+    button: z.object({ label: text.meta({ title: "Label" }), href, style: z.enum(["main", "quiet"]).default("main").meta({ title: "Style" }) }).meta({ title: "Button" }),
+    list: z.object({ items: z.array(text).min(1).max(20).meta({ title: "Items" }), style: z.enum(["bullets", "checks", "numbers"]).default("bullets").meta({ title: "Style" }) }).meta({ title: "List" }),
+    quote: z.object({ text: text.meta({ title: "Quote" }), who: text.optional().meta({ title: "Who said it" }) }).meta({ title: "Quote" }),
+    stats: z.object({ items: z.array(z.object({ value: text.meta({ title: "Number" }), label: text.meta({ title: "What it is" }) })).min(1).max(6).meta({ title: "Facts" }) }).meta({ title: "Facts in a row", description: "8 guests · 4 cabins · 2 baths" }),
+    price: z.object({ amount: text.meta({ title: "Price" }), per: text.optional().meta({ title: "Per" }), note: text.optional().meta({ title: "Note" }) }).meta({ title: "Price" }),
+    gallery: z.object({ images: z.array(photo).min(1).max(30).meta({ title: "Photos" }), columns: z.enum(["2", "3", "4"]).default("3").meta({ title: "Photos across" }) }).meta({ title: "Photos in a grid" }),
+    slideshow: z.object({ images: z.array(photo).min(2).max(20).meta({ title: "Photos" }), seconds: z.number().int().min(3).max(15).default(5).meta({ title: "Seconds on each photo" }) }).meta({ title: "Slideshow" }),
+    space: z.object({ size: z.enum(["small", "medium", "large"]).default("medium").meta({ title: "Size" }) }).meta({ title: "Space" }),
+};
+const part = z.discriminatedUnion("type", Object.keys(parts).map((type) => z.object({ type: z.literal(type) }).extend(parts[type].shape).meta(parts[type].meta())));
+/** A section of the business's own: columns of parts, laid out as chosen, in the site's design. */
+export const own = z
+    .object({
+    layout: z.enum(["one", "two", "three", "four", "wide-left", "wide-right"]).default("one").meta({ title: "Columns" }),
+    align: z.enum(["left", "center"]).default("left").meta({ title: "Align" }),
+    tone: z.enum(["plain", "brand"]).default("plain").meta({ title: "Background" }),
+    columns: z
+        .array(z.object({ parts: z.array(part).max(12).meta({ title: "Parts" }) }).meta({ title: "Column" }))
+        .min(1)
+        .max(4)
+        .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 };
+export const sections = { gallery, slideshow, own };
 export const isKitSection = (type) => Object.prototype.hasOwnProperty.call(sections, type);

package/dist/sections.css

@@ -191,3 +191,168 @@
     transition: none;
   }
 }
+
+/*
+ * A section of the business's own: its columns side by side from a tablet up (stacked on a phone),
+ * its parts spaced evenly, in the site's type. Brand tone: the site's brand colour behind, its
+ * readable colour over it.
+ */
+.kit-own-brand {
+  background: var(--look-brand, #111);
+  color: var(--look-on-brand, #fff);
+}
+.kit-own-grid {
+  display: grid;
+  gap: clamp(24px, 4vw, 48px);
+}
+@media (min-width: 720px) {
+  .kit-own-two,
+  .kit-own-four {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .kit-own-three {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .kit-own-wide-left {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  }
+  .kit-own-wide-right {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  }
+}
+@media (min-width: 1024px) {
+  .kit-own-four {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+.kit-own-align-center {
+  text-align: center;
+}
+.kit-own-align-center .kit-own-text,
+.kit-own-align-center .kit-own-list {
+  margin-inline: auto;
+}
+.kit-own-column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.kit-own-column > * {
+  margin: 0;
+}
+.kit-own-h-large {
+  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+}
+.kit-own-h-small {
+  font-size: 1.15rem;
+}
+.kit-own-text {
+  max-width: 65ch;
+}
+.kit-own-photo {
+  margin: 0;
+}
+.kit-own-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--look-radius, 8px);
+  object-fit: cover;
+}
+.kit-own-photo img.ratio-1-1 {
+  aspect-ratio: 1 / 1;
+}
+.kit-own-photo img.ratio-4-3 {
+  aspect-ratio: 4 / 3;
+}
+.kit-own-photo img.ratio-4-5 {
+  aspect-ratio: 4 / 5;
+}
+.kit-own-photo figcaption,
+.kit-own-quote figcaption {
+  margin-top: 8px;
+  font-size: 0.9rem;
+  opacity: 0.75;
+}
+.kit-button {
+  display: inline-block;
+  padding: 10px 18px;
+  border: 1px solid var(--look-button-border, currentColor);
+  border-radius: var(--look-button-radius, 8px);
+  background: var(--look-button-bg, #111);
+  color: var(--look-button-fg, #fff);
+  font-weight: 500;
+  text-decoration: none;
+}
+.kit-button-quiet {
+  background: transparent;
+  color: inherit;
+}
+.kit-own-list {
+  max-width: 65ch;
+  padding-left: 1.25em;
+}
+.kit-own-list li + li {
+  margin-top: 6px;
+}
+.kit-own-list-checks {
+  list-style: none;
+  padding-left: 0;
+}
+.kit-own-list-checks li::before {
+  content: "✓";
+  margin-right: 8px;
+  color: var(--look-accent, currentColor);
+}
+.kit-own-quote {
+  margin: 0;
+}
+.kit-own-quote blockquote {
+  margin: 0;
+  font-size: 1.15rem;
+  line-height: 1.5;
+}
+.kit-own-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 32px;
+}
+.kit-own-align-center .kit-own-stats {
+  justify-content: center;
+}
+.kit-own-stats div {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.kit-own-stats dd {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1.1;
+}
+.kit-own-stats dt {
+  font-size: 0.85rem;
+  opacity: 0.75;
+}
+.kit-own-amount {
+  font-size: 2rem;
+  font-weight: 600;
+}
+.kit-own-per {
+  opacity: 0.75;
+}
+.kit-own-note {
+  display: block;
+  font-size: 0.85rem;
+  opacity: 0.75;
+}
+.kit-own-space-small {
+  height: 8px;
+}
+.kit-own-space-medium {
+  height: 24px;
+}
+.kit-own-space-large {
+  height: 56px;
+}

package/dist/sections.test.js

@@ -92,3 +92,43 @@ describe("a slideshow", () => {
         expect(html).toContain('aria-label="On board"');
     });
 });
+describe("a section of the business's own", () => {
+    const page = (blocks, saved = []) => ({ url: "https://acme.example", business: { name: "Acme" }, saved, pages: [{ path: "/", title: "Acme", description: "Acme does things.", blocks }] });
+    const block = {
+        type: "own",
+        layout: "two",
+        columns: [
+            { parts: [{ type: "heading", text: "Our packages", size: "large" }, { type: "text", text: "Pick **the one** that suits." }, { type: "list", items: ["Captain", "Food"], style: "checks" }, { type: "button", label: "Book", href: "/" }] },
+            { parts: [{ type: "price", amount: "$120", per: "a night", note: "per person" }, { type: "stats", items: [{ value: "8", label: "guests" }, { value: "4", label: "cabins" }] }, { type: "quote", text: "Best week ever.", who: "Ana" }] },
+        ],
+    };
+    it("is put together from parts, checked like any section, and can be saved by name to add again", () => {
+        const site = defineSite({ ...sections });
+        const ok = site.parse(page([block], [{ name: "Package card", block }]));
+        expect(ok.problems).toBeUndefined();
+        expect(ok.site.pages[0].blocks[0]).toMatchObject({ align: "left", tone: "plain" });
+        expect(ok.site.saved[0].name).toBe("Package card");
+        // A part it doesn't know, or a list with nothing in it, is said.
+        expect(site.parse(page([{ ...block, columns: [{ parts: [{ type: "marquee" }] }] }])).problems?.join(" ")).toMatch(/type/);
+        expect(site.parse(page([{ ...block, columns: [{ parts: [{ type: "list", items: [] }] }] }])).problems?.join(" ")).toMatch(/items/);
+        // Saved sections are optional: a site without any is as it was.
+        expect(site.parse(page([block])).site.saved).toEqual([]);
+    });
+    it("is drawn in the site's own classes: its heading, words and buttons", () => {
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: block, level: 2, classes: { section: "", wrap: "site-wrap", heading: "site-h", text: "site-text", button: "site-button" } }));
+        expect(html).toContain('class="kit-own-grid kit-own-two kit-own-align-left"');
+        expect(html).toContain('<h2 class="site-h kit-own-h-large">Our packages</h2>');
+        expect(html).toContain("<strong>the one</strong>");
+        expect(html).toContain('class="kit-own-list kit-own-list-checks site-text"');
+        expect(html).toContain('<a href="/" class="site-button">Book</a>');
+        expect(html).toContain('<span class="kit-own-amount">$120</span>');
+        expect(html).toContain("<dd>8</dd>");
+        expect(html).toContain("<blockquote class=\"site-text\">Best week ever.</blockquote>");
+        expect(html).not.toMatch(/\sstyle=/);
+    });
+    it("keeps to its layout's columns, and draws the kit's own button where the site gave none", () => {
+        const html = renderToStaticMarkup(_jsx(KitSection, { s: { ...block, layout: "one" } }));
+        expect(html.match(/kit-own-column/g)).toHaveLength(1);
+        expect(html).toContain('class="kit-button"');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caltho/site-kit",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "What every Caltho site is built with: the contract with CalOS (content, and how a site declares what is editable), images, search and security, and the checks",
   "license": "MIT",
   "type": "module",