@tideworthy/tidysites-platform 0.10.15 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.11.0
+
+The package carries the template.
+
+- `@tideworthy/tidysites-platform/template`: the one data shape every theme renders (24 collections, 35 section types, menus), typed, with `mergeStructure()`; `template/structure.json` is the source and `template/README.md` the rules and the evidence.
+- `npx tidysites-seed [seed.json] [--check]`: writes the template's structure into a theme's seed and keeps its menus, settings and content; refuses a seed whose section values use fields their block type does not declare.
+- `@tideworthy/tidysites-platform/sections`: the section dispatcher. A site's `src/custom/blocks/<type>.astro`, then the theme's `src/sections/<type>.astro` (or its `components` prop), then the package default. Every block framed for the on-site editor.
+- `@tideworthy/tidysites-platform/sections/defaults/<type>.astro`: a plain default rendering of every section type, driven by the brand tokens; `sections/lib` has the helpers and the normalized business record; `sections/photo` the photo slot.
+
 ## 0.10.14
 
 - Editor bar: Edit, Done and Sign in to edit show a spinner and what they are doing until the page comes back.

package/README.md

@@ -12,6 +12,19 @@ npm install @tideworthy/tidysites-platform
 
 Peer dependencies: `astro` 7, `emdash` and `@emdash-cms/auth` 1.x, `kysely`. Published on npm as `@tideworthy/tidysites-platform`; GitHub tags `vX.Y.Z` match each version.
 
+## The template and the sections
+
+Since 0.11.0 the package carries the Tidysites template: the collections, fields, section types and menus every theme renders (`template/README.md` has the rules). A theme installs the package, writes the template's structure into its seed with `npx tidysites-seed`, renders pages with `@tideworthy/tidysites-platform/sections`, and overrides the section types it has an opinion about in `src/sections/<type>.astro`. Everything else renders with the package default, so a section an owner adds later still shows up.
+
+```astro
+---
+import Sections from "@tideworthy/tidysites-platform/sections";
+import { sectionTypes } from "@tideworthy/tidysites-platform/template";
+---
+<Sections value={page.data.sections} />
+<TidyEditor blocks={sectionTypes} ... />
+```
+
 ## Wire it up
 
 ```js

package/bin/tidysites-seed.mjs

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+/**
+ * Put the template's structure into a theme's seed file.
+ *   npx tidysites-seed            (seed/seed.json, or the path in package.json "emdash.seed")
+ *   npx tidysites-seed path/to/seed.json [--check]
+ * The seed keeps its menus, settings, meta and content; collections, block
+ * types and relations are replaced with the package's. --check exits 1 when
+ * the file is out of date instead of writing it, for CI.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const args = process.argv.slice(2);
+const check = args.includes("--check");
+let file = args.find((a) => !a.startsWith("--"));
+if (!file) {
+	try {
+		const pkg = JSON.parse(fs.readFileSync(path.resolve("package.json"), "utf8"));
+		file = pkg?.emdash?.seed ?? "seed/seed.json";
+	} catch {
+		file = "seed/seed.json";
+	}
+}
+const seedPath = path.resolve(file);
+const templatePath = fileURLToPath(new URL("../template/structure.json", import.meta.url));
+const template = JSON.parse(fs.readFileSync(templatePath, "utf8"));
+const seed = fs.existsSync(seedPath) ? JSON.parse(fs.readFileSync(seedPath, "utf8")) : {};
+
+const { blockTypes: _b, collections: _c, relations: _r, ...rest } = seed;
+const next = { $schema: template.$schema, version: template.version, meta: rest.meta ?? template.meta, settings: rest.settings ?? {}, blockTypes: template.blockTypes, collections: template.collections, menus: rest.menus ?? template.menus ?? [], content: rest.content ?? {} };
+if (template.relations !== undefined) next.relations = template.relations;
+// Every section value in the content must use only the fields its block type declares (EmDash refuses the seed otherwise).
+const types = new Map(template.blockTypes.map((b) => [b.slug, new Set(["_type", "_key", "_version", ...((b.versions.find((v) => v.version === b.currentVersion) ?? b.versions[b.versions.length - 1]).fields.map((f) => f.slug))])]));
+const problems = [];
+for (const [collection, list] of Object.entries(next.content)) for (const e of list) for (const s of Array.isArray(e?.data?.sections) ? e.data.sections : []) {
+	const allowed = types.get(s._type);
+	if (!allowed) { problems.push(`${collection}/${e.id}: section type "${s._type}" is not in the template`); continue; }
+	for (const k of Object.keys(s)) if (!allowed.has(k)) problems.push(`${collection}/${e.id}: section "${s._type}" (${s._key}) uses "${k}", which its block type does not declare`);
+}
+if (problems.length) { console.error(problems.join("\n")); process.exit(1); }
+const text = JSON.stringify(next, null, "\t") + "\n";
+const current = fs.existsSync(seedPath) ? fs.readFileSync(seedPath, "utf8") : "";
+if (check) {
+	if (current === text) { console.log(`${file} matches the template.`); process.exit(0); }
+	console.error(`${file} is out of date with the template. Run: npx tidysites-seed ${file}`);
+	process.exit(1);
+}
+fs.mkdirSync(path.dirname(seedPath), { recursive: true });
+fs.writeFileSync(seedPath, text);
+console.log(`${file}: ${template.collections.length} collections, ${template.blockTypes.length} section types from the template; menus, settings and content kept.`);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.10.15",
+	"version": "0.11.0",
 	"description": "The Tidysites platform integration for EmDash sites: bootstrap, sessions, maintenance, health, and publish hooks under /_tidy/*.",
 	"license": "MIT",
 	"type": "module",
@@ -11,6 +11,8 @@
 	"homepage": "https://github.com/4sons/tidysites-platform#readme",
 	"files": [
 		"src",
+		"template",
+		"bin",
 		"README.md",
 		"LICENSE",
 		"CHANGELOG.md"
@@ -32,7 +34,14 @@
 		"./routes/schema": "./src/routes/schema.ts",
 		"./routes/maintenance": "./src/routes/maintenance.ts",
 		"./routes/revisions": "./src/routes/revisions.ts",
-		"./routes/change": "./src/routes/change.ts"
+		"./routes/change": "./src/routes/change.ts",
+		"./template": "./src/template/index.ts",
+		"./template/structure.json": "./template/structure.json",
+		"./sections": "./src/sections/Sections.astro",
+		"./sections/lib": "./src/sections/lib.ts",
+		"./sections/photo": "./src/sections/Photo.astro",
+		"./sections/defaults.css": "./src/sections/defaults.css",
+		"./sections/defaults/*": "./src/sections/defaults/*"
 	},
 	"scripts": {
 		"typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.editor.json",
@@ -61,5 +70,8 @@
 	"publishConfig": {
 		"access": "public",
 		"provenance": true
+	},
+	"bin": {
+		"tidysites-seed": "./bin/tidysites-seed.mjs"
 	}
 }

package/src/sections/Photo.astro

@@ -0,0 +1,18 @@
+---
+/** A photo slot: the CMS image, a plain URL, or a labelled empty slot. Never a broken image. */
+import { Image } from "emdash/ui";
+interface Props {
+	image?: { id?: string; src?: string; alt?: string; width?: number; height?: number } | null;
+	url?: string | null;
+	alt: string;
+	ratio?: "wide" | "tall" | "square" | "video";
+	width?: number;
+	height?: number;
+	class?: string;
+}
+const { image, url, alt, ratio = "wide", width = 1200, height = 750, class: cls = "" } = Astro.props;
+const has = Boolean(image?.id || image?.src || url);
+---
+<div class={`ts-photo ts-photo-${ratio} ${has ? "ts-photo-has" : ""} ${cls}`.trim()}>
+	{image?.id || image?.src ? <Image image={image as never} width={width} height={height} alt={image?.alt ?? alt} /> : url ? <img src={url} alt={alt} loading="lazy" /> : <span>{alt}</span>}
+</div>

package/src/sections/Sections.astro

@@ -0,0 +1,42 @@
+---
+/**
+ * Renders a page's `sections` field. For each block, the component comes from
+ * the first of: the site's own folder (src/custom/blocks/<type>.astro), the
+ * theme (src/sections/<type>.astro, or the `components` prop for a theme that
+ * keeps its own map), then this package's default for the type. Every block is
+ * framed for the on-site editor (`data-tidy-block`, `data-tidy-type`).
+ */
+import type { Node } from "./lib";
+import "./defaults.css";
+import { SECTION_TYPES } from "../template/index";
+
+export type Section = { _type: string; _key?: string; _version?: number } & Record<string, unknown>;
+type Comp = (props: Record<string, unknown>) => unknown;
+const byName = (mods: Record<string, unknown>): Record<string, Comp> =>
+	Object.fromEntries(Object.entries(mods).map(([path, mod]) => [path.split("/").pop()!.replace(/\.astro$/, ""), (mod as { default: Comp }).default]));
+
+// Root-relative globs resolve against the consuming site, not this package.
+const site = byName(import.meta.glob("/src/custom/blocks/*.astro", { eager: true }));
+const theme = byName(import.meta.glob("/src/sections/*.astro", { eager: true }));
+const defaults = byName(import.meta.glob("./defaults/*.astro", { eager: true }));
+
+interface Props {
+	value?: Section[] | null;
+	/** A theme's own components by type, for themes that keep their own map. */
+	components?: Record<string, Comp>;
+	/** The entry the page shows (its data), for sections that depend on it, such as related services. */
+	context?: Node | null;
+	/** Set false to leave out this package's defaults and render only what the theme and site provide. */
+	fallback?: boolean;
+}
+const { value, components = {}, context = null, fallback = true } = Astro.props;
+const sections = Array.isArray(value) ? value : [];
+const pick = (type: string): Comp | undefined => site[type] ?? components[type] ?? theme[type] ?? (fallback ? defaults[type] : undefined);
+---
+<div data-tidy-blocks>
+	{sections.map((s, index) => {
+		const Component = pick(s._type);
+		if (!Component) return import.meta.env.DEV ? <div role="alert" class="ts-missing">No component for section type “{s._type}”{SECTION_TYPES.includes(s._type) ? "" : " (not a template section type)"}.</div> : null;
+		return <div data-tidy-block={String(s._key ?? "")} data-tidy-type={s._type}><Component value={s} index={index} blockKey={String(s._key ?? "")} context={context} /></div>;
+	})}
+</div>

package/src/sections/defaults/_Head.astro

@@ -0,0 +1,13 @@
+---
+/** The eyebrow, headline and optional text that open most sections, plus a right-side action. */
+import { str } from "../lib";
+interface Props { n: Record<string, unknown>; action?: { href: string; label: string } | null; class?: string }
+const { n, action = null, class: cls = "" } = Astro.props;
+const eyebrow = str(n.eyebrow), headline = str(n.headline), body = str(n.body) || str(n.text);
+---
+{(eyebrow || headline || body || action) && (
+	<div class={`ts-head ${cls}`}>
+		<div>{eyebrow && <p class="ts-eyebrow">{eyebrow}</p>}{headline && <h2>{headline}</h2>}{body && <p class="ts-lede">{body}</p>}</div>
+		{action && <a class="ts-btn ts-btn-outline" href={action.href}>{action.label}</a>}
+	</div>
+)}

package/src/sections/defaults/areas.astro

@@ -0,0 +1,20 @@
+---
+/** Places served from the service area records. */
+import { bool, entries, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const variant = str(n.variant, "link list");
+let items = await entries("service_areas", { limit: int(n.limit, 40) });
+if (bool(n.featured_only)) items = items.filter((a) => bool(a.data.featured) || bool(a.data.is_home_base));
+const href = (a: { slug?: string | null; id: string }) => `/service-areas/${a.slug ?? a.id}`;
+const regions = variant === "grouped by region" ? [...new Set(items.map((a) => str(a.data.region)))].map((r) => ({ title: r, items: items.filter((a) => str(a.data.region) === r) })) : [];
+---
+{items.length > 0 && (
+<section class="ts" id="areas"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_all, true) ? { href: "/service-areas", label: "All areas" } : null} />
+	{variant === "cards" ? <div class="ts-grid" style="--cols:3">{items.map((a) => { const p = pic(a.data.featured_image); return <a class="ts-card" href={href(a)} data-tidy-record="service_areas" data-tidy-record-id={a.id} data-tidy-record-label="Service area">{(p.image || p.url) && <Photo image={p.image} url={p.url} alt={str(a.data.title)} ratio="wide" />}<h3>{str(a.data.title)}</h3>{str(a.data.summary) && <p>{str(a.data.summary)}</p>}</a>; })}</div>
+	: variant === "grouped by region" ? regions.map((r) => <div>{r.title && <p class="ts-group">{r.title}</p>}<div class="ts-chips">{r.items.map((a) => <a class="ts-chip" href={href(a)}>{str(a.data.title)}</a>)}</div></div>)
+	: <div class="ts-chips">{items.map((a) => <a class="ts-chip" href={href(a)} data-tidy-record="service_areas" data-tidy-record-id={a.id} data-tidy-record-label="Service area">{str(a.data.title)}{bool(a.data.is_home_base) ? " · home base" : ""}</a>)}</div>}
+</div></section>
+)}

package/src/sections/defaults/badges.astro

@@ -0,0 +1,17 @@
+---
+/** Associations, certifications, awards and seals: from the badge records or written into the section. */
+import { entries, list, nodeOf, pic, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const fromRecords = str(n.source, "badges from the badges records").startsWith("badges from");
+const group = str(n.group);
+const recs = fromRecords ? (await entries("badges", { limit: 24 })).filter((b) => !group || str(b.data.group) === group).map((b) => ({ title: str(b.data.title), issuer: str(b.data.issuer), image: pic(b.data.image), url: str(b.data.url), id: b.id })) : [];
+const inline = list<Record<string, unknown>>(n.badges).map((b) => ({ title: str(b.title), issuer: str(b.issuer), image: pic(b.image), url: str(b.url), id: "" }));
+const items = [...recs, ...inline].filter((b) => b.title);
+---
+{items.length > 0 && (
+<section class="ts ts-tight"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-logos">{items.map((b) => { const Tag = b.url ? "a" : "div"; return <Tag class="ts-logo" href={b.url || undefined} {...(b.id ? { "data-tidy-record": "badges", "data-tidy-record-id": b.id, "data-tidy-record-label": "Badge" } : {})}>{(b.image.image?.src || b.image.url) && <img src={b.image.image?.src ?? b.image.url ?? ""} alt="" />}<span>{b.title}{b.issuer && <span class="ts-muted" style="font-weight:400"> · {b.issuer}</span>}</span></Tag>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/brands.astro

@@ -0,0 +1,14 @@
+---
+import { entries, nodeOf, pic, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+let items = await entries("brands", { limit: 40 });
+if (str(n.group)) items = items.filter((b) => str(b.data.group) === str(n.group));
+const names = str(n.variant) === "names";
+---
+{items.length > 0 && (
+<section class="ts ts-tight"><div class="ts-wrap">
+	<Head n={n} />
+	{names ? <p class="ts-lede" style="margin:0">{items.map((b) => str(b.data.title)).join(", ")}</p> : <div class="ts-logos">{items.map((b) => { const p = pic(b.data.logo); const Tag = str(b.data.url) ? "a" : "div"; return <Tag class="ts-logo" href={str(b.data.url) || undefined} data-tidy-record="brands" data-tidy-record-id={b.id} data-tidy-record-label="Brand">{(p.image?.src || p.url) && <img src={p.image?.src ?? p.url ?? ""} alt="" />}<span>{str(b.data.title)}</span></Tag>; })}</div>}
+</div></section>
+)}

package/src/sections/defaults/case_studies.astro

@@ -0,0 +1,16 @@
+---
+import { bool, entries, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = await entries("case_studies", { limit: int(n.limit, 3) });
+const results = (d: Record<string, unknown>) => [1, 2, 3].map((i) => ({ v: str(d[`result_${i}_value`]), l: str(d[`result_${i}_label`]) })).filter((r) => r.v);
+const variant = str(n.variant, "cards");
+---
+{items.length > 0 && (
+<section class="ts" id="case-studies"><div class="ts-wrap">
+	<Head n={n} />
+	{variant === "results strip" ? <div class="ts-grid" style="--cols:3">{items.flatMap((c) => results(c.data).slice(0, 1).map((r) => <div class="ts-card ts-stat"><b>{r.v}</b><span>{r.l} · {str(c.data.client) || str(c.data.title)}</span></div>))}</div>
+	: <div class="ts-grid" style={`--cols:${variant === "one featured" ? 1 : 3}`}>{items.slice(0, variant === "one featured" ? 1 : undefined).map((c) => { const p = pic(c.data.featured_image); return <a class="ts-card" href={`/case-studies/${c.slug ?? c.id}`} data-tidy-record="case_studies" data-tidy-record-id={c.id} data-tidy-record-label="Case study">{(p.image || p.url) && <Photo image={p.image} url={p.url} alt={str(c.data.title)} ratio="wide" />}{(str(c.data.client) || str(c.data.industry)) && <p class="ts-eyebrow" style="margin:0">{[str(c.data.client), str(c.data.industry)].filter(Boolean).join(" · ")}</p>}<h3>{str(c.data.title)}</h3>{str(c.data.summary) && <p>{str(c.data.summary)}</p>}{bool(n.show_results, true) && results(c.data).length > 0 && <div style="display:flex;gap:18px;flex-wrap:wrap;margin-top:6px">{results(c.data).map((r) => <div class="ts-stat"><b style="font-size:28px">{r.v}</b><span>{r.l}</span></div>)}</div>}</a>; })}</div>}
+</div></section>
+)}

package/src/sections/defaults/cases.astro

@@ -0,0 +1,22 @@
+---
+/** Before and after cases from the records. */
+import { bool, entries, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = await entries("cases", { limit: int(n.limit, 3) });
+const names = bool(n.show_names);
+---
+{items.length > 0 && (
+<section class="ts" id="results"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${str(n.variant) === "slider" ? 1 : 3}`}>
+		{items.map((c) => { const bp = pic(c.data.before), ap = pic(c.data.after); return (
+			<article class="ts-card" data-tidy-record="cases" data-tidy-record-id={c.id} data-tidy-record-label="Case" style="padding:0;overflow:hidden">
+				<div class="ts-ba"><div style="position:relative"><span class="ts-tag">Before</span><Photo image={bp.image} url={bp.url} alt="Before" ratio="square" /></div><div style="position:relative"><span class="ts-tag">After</span><Photo image={ap.image} url={ap.url} alt="After" ratio="square" /></div></div>
+				<div style="padding:16px 18px 18px">{str(c.data.category) && <p class="ts-role">{str(c.data.category)}</p>}<h3 style="font-size:18px;margin-top:4px">{str(c.data.title)}{names && str(c.data.patient_name) ? ` · ${str(c.data.patient_name)}` : ""}</h3>{(str(c.data.story) || str(c.data.problem)) && <p style="margin-top:6px">{str(c.data.story) || [str(c.data.problem), str(c.data.treatment)].filter(Boolean).join(" ")}</p>}</div>
+			</article>
+		); })}
+	</div>
+</div></section>
+)}

package/src/sections/defaults/clients.astro

@@ -0,0 +1,14 @@
+---
+import { bool, entries, int, nodeOf, pic, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+let items = await entries("clients", { limit: int(n.limit, 24) });
+if (bool(n.featured_only)) items = items.filter((c) => bool(c.data.featured));
+const industries = str(n.variant) === "with industries";
+---
+{items.length > 0 && (
+<section class="ts ts-tight"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-logos" style={str(n.variant) === "logo strip" ? "justify-content:space-between" : ""}>{items.map((c) => { const p = pic(c.data.logo); const Tag = str(c.data.url) ? "a" : "div"; return <Tag class="ts-logo" href={str(c.data.url) || undefined} data-tidy-record="clients" data-tidy-record-id={c.id} data-tidy-record-label="Client">{(p.image?.src || p.url) ? <img src={p.image?.src ?? p.url ?? ""} alt={str(c.data.title)} /> : <span>{str(c.data.title)}</span>}{industries && str(c.data.industry) && <span class="ts-muted" style="font-weight:400">{str(c.data.industry)}</span>}</Tag>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/conditions.astro

@@ -0,0 +1,13 @@
+---
+import { entries, int, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = await entries("conditions", { limit: int(n.limit, 24) });
+const cards = str(n.variant) === "cards";
+---
+{items.length > 0 && (
+<section class="ts ts-band" id="conditions"><div class="ts-wrap">
+	<Head n={n} />
+	{cards ? <div class="ts-grid" style="--cols:3">{items.map((c) => <a class="ts-card" href={`/conditions/${c.slug ?? c.id}`} data-tidy-record="conditions" data-tidy-record-id={c.id} data-tidy-record-label="Condition"><h3>{str(c.data.title)}</h3>{str(c.data.summary) && <p>{str(c.data.summary)}</p>}</a>)}</div> : <div class="ts-chips">{items.map((c) => <a class="ts-chip" href={`/conditions/${c.slug ?? c.id}`} data-tidy-record="conditions" data-tidy-record-id={c.id} data-tidy-record-label="Condition">{str(c.data.title)}</a>)}</div>}
+</div></section>
+)}

package/src/sections/defaults/contact.astro

@@ -0,0 +1,46 @@
+---
+/** A request or contact form, each extra question a switch, beside the business details. */
+import { bool, entries, getBusiness, nodeOf, str, addressLine } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const variant = str(n.variant, "appointment request");
+const services = bool(n.ask_service, variant !== "question only") ? await entries("services", { limit: 40 }) : [];
+const providers = bool(n.ask_provider) ? await entries("people", { limit: 20 }) : [];
+let turnstile: string | undefined;
+try { const m = (await import("cloudflare:workers")) as unknown as { env?: Record<string, unknown> }; turnstile = typeof m.env?.TURNSTILE_SITEKEY === "string" ? m.env.TURNSTILE_SITEKEY : undefined; } catch { turnstile = undefined; }
+const details = bool(n.show_business_details, true);
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+---
+<section class="ts" id="contact"><div class="ts-wrap">
+	<Head n={n} />
+	<div class={details ? "ts-split" : ""} style="align-items:start">
+		<form class="ts-form" action="/api/lead" method="post">
+			<label>Name<input name="name" autocomplete="name" required /></label>
+			<label>Phone<input name="phone" type="tel" autocomplete="tel" /></label>
+			<label class={variant === "short" ? "ts-full" : ""}>Email<input name="email" type="email" autocomplete="email" /></label>
+			{services.length > 0 && <label>What is it about?<select name="service"><option value="">Choose one</option>{services.map((s) => <option value={s.id}>{str(s.data.title)}</option>)}<option value="other">Something else</option></select></label>}
+			{providers.length > 0 && <label>Who would you like to see?<select name="provider"><option value="">No preference</option>{providers.map((p) => <option value={p.id}>{str(p.data.display_name) || str(p.data.title)}</option>)}</select></label>}
+			{bool(n.ask_patient_type) && <div class="ts-full"><span style="font-size:13px;font-weight:600;color:var(--ts-ink-2);display:block;margin-bottom:8px">Are you</span><div class="ts-choices"><label><input type="radio" name="patient_type" value="new" /> New</label><label><input type="radio" name="patient_type" value="existing" /> Existing</label></div></div>}
+			{bool(n.ask_day) && <div class="ts-full"><span style="font-size:13px;font-weight:600;color:var(--ts-ink-2);display:block;margin-bottom:8px">Days that work</span><div class="ts-choices">{DAYS.map((d) => <label><input type="checkbox" name="days" value={d} /> {d}</label>)}</div></div>}
+			{bool(n.ask_time) && <label>Preferred time<select name="time"><option>Any</option><option>Morning</option><option>Afternoon</option><option>Evening</option></select></label>}
+			{bool(n.ask_contact_method) && <label>How should we reply?<select name="contact_method"><option>Phone</option><option>Text</option><option>Email</option></select></label>}
+			{bool(n.ask_referrer) && <label class="ts-full">How did you hear about us?<input name="referrer" /></label>}
+			{variant !== "short" && <label class="ts-full">{variant === "question only" ? "Your question" : "Anything we should know?"}<textarea name="message"></textarea></label>}
+			<input class="ts-hp" type="text" name="website_hp" tabindex="-1" autocomplete="off" aria-hidden="true" />
+			{turnstile && <div class="cf-turnstile ts-full" data-sitekey={turnstile} data-size="flexible"></div>}
+			<div class="ts-full" style="display:flex;gap:14px;align-items:center;flex-wrap:wrap"><button class="ts-btn ts-btn-accent" type="submit">{str(n.submit_label) || (variant === "question only" ? "Send question" : "Send request")}</button>{str(n.promise) && <span class="ts-muted" style="font-size:13px">{str(n.promise)}</span>}</div>
+		</form>
+		{details && (
+			<dl class="ts-kv ts-card">
+				{b.phone && <><dt>Call or text</dt><dd><a href={b.phoneHref}>{b.phone}</a></dd></>}
+				{b.email && <><dt>Email</dt><dd><a href={`mailto:${b.email}`}>{b.email}</a></dd></>}
+				{b.hours && <><dt>Hours</dt><dd>{b.hours}</dd></>}
+				{addressLine(b) && <><dt>{b.isServiceArea ? "Based in" : "Address"}</dt><dd>{addressLine(b)}</dd></>}
+				{b.sameDayLine && <><dt>Same day</dt><dd>{b.sameDayLine}</dd></>}
+				{b.parkingLine && <><dt>Parking</dt><dd>{b.parkingLine}</dd></>}
+			</dl>
+		)}
+	</div>
+</div></section>
+{turnstile && <script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>}

package/src/sections/defaults/cta.astro

@@ -0,0 +1,16 @@
+---
+import { bool, getBusiness, nodeOf, str } from "../lib";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const variant = str(n.variant, "band");
+const href = str(n.button_url) || b.bookingUrl || "/contact";
+---
+<section class="ts ts-ink ts-tight" id="book"><div class="ts-wrap" style={variant !== "band" ? "display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center" : ""}>
+	<div>
+		<h2>{str(n.headline) || b.ctaLabel}</h2>
+		{str(n.body) && <p class="ts-lede">{str(n.body)}</p>}
+		<div class="ts-actions"><a class="ts-btn ts-btn-accent ts-btn-lg" href={href}>{str(n.button_label) || b.ctaLabel}</a>{str(n.button2_label) ? <a class="ts-btn ts-btn-outline ts-btn-lg" href={str(n.button2_url, "#")}>{str(n.button2_label)}</a> : bool(n.show_phone, true) && b.phone && <a class="ts-btn ts-btn-outline ts-btn-lg" href={b.phoneHref}>{b.phone}</a>}</div>
+	</div>
+	{variant === "band with facts" && <dl class="ts-kv ts-card">{b.hours && <><dt>Hours</dt><dd>{b.hours}</dd></>}{b.sameDayLine && <><dt>Same day</dt><dd>{b.sameDayLine}</dd></>}{b.newPatientsLine && <><dt></dt><dd>{b.newPatientsLine}</dd></>}</dl>}
+	{variant === "band with form" && <form class="ts-form ts-card" action="/api/lead" method="post"><label class="ts-full">Name<input name="name" required /></label><label class="ts-full">Phone<input name="phone" type="tel" /></label><input class="ts-hp" type="text" name="website_hp" tabindex="-1" autocomplete="off" aria-hidden="true" /><div class="ts-full"><button class="ts-btn ts-btn-accent" type="submit">{str(n.button_label) || b.ctaLabel}</button></div></form>}
+</div></section>

package/src/sections/defaults/custom.astro

@@ -0,0 +1,16 @@
+---
+/** The site's own HTML, CSS and script, in a sandboxed frame sized to its content. */
+import { int, nodeOf, str } from "../lib";
+const n = nodeOf(Astro.props);
+const html = str(n.html), css = str(n.css), js = str(n.js);
+const height = int(n.height, int(n.min_height, 320));
+const key = String((Astro.props as { blockKey?: string }).blockKey ?? "");
+const doc = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>html,body{margin:0;font-family:system-ui,sans-serif}${css}</style></head><body>${html}<script>${js}<\/script><script>new ResizeObserver(()=>parent.postMessage({tidyFrame:${JSON.stringify(key)},h:document.documentElement.scrollHeight},"*")).observe(document.documentElement)<\/script></body></html>`;
+---
+{(html || css || js) && (
+<section class="ts ts-tight"><div class="ts-wrap">
+	{str(n.title) && <h2 style="margin-bottom:14px">{str(n.title)}</h2>}
+	<iframe class="ts-frame" data-tidy-frame={key} srcdoc={doc} sandbox="allow-scripts allow-forms allow-popups" style={`height:${height}px`} title={str(n.title) || "Custom section"} loading="lazy"></iframe>
+</div></section>
+<script is:inline>window.addEventListener("message",function(e){var d=e.data;if(!d||!d.tidyFrame)return;var f=document.querySelector('iframe[data-tidy-frame="'+d.tidyFrame+'"]');if(f&&d.h>0)f.style.height=d.h+"px";});</script>
+)}

package/src/sections/defaults/downloads.astro

@@ -0,0 +1,14 @@
+---
+import { entries, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+let items = await entries("downloads", { limit: 40 });
+if (str(n.group)) items = items.filter((d) => str(d.data.group) === str(n.group));
+const groups = [...new Set(items.map((d) => str(d.data.group)))].map((g) => ({ title: g, items: items.filter((d) => str(d.data.group) === g) }));
+---
+{items.length > 0 && (
+<section class="ts" id="forms"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${Math.min(2, groups.length)}`}>{groups.map((g) => <div>{g.title && <p class="ts-group" style="margin-top:0">{g.title}</p>}<div style="display:grid;gap:8px">{g.items.map((d) => <a class="ts-card" href={str(d.data.file_url, "#")} style="flex-direction:row;justify-content:space-between;align-items:center;padding:12px 14px" data-tidy-record="downloads" data-tidy-record-id={d.id} data-tidy-record-label="Form"><span style="font-weight:600">{str(d.data.title)}</span>{str(d.data.note) && <span class="ts-muted" style="font-size:12.5px">{str(d.data.note)}</span>}</a>)}</div></div>)}</div>
+</div></section>
+)}

package/src/sections/defaults/faq.astro

@@ -0,0 +1,20 @@
+---
+/** Questions from the records, filtered by group or service, plus any written into the section. */
+import { bool, entries, int, list, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const group = str(n.group);
+let items = await entries("faqs", { limit: int(n.limit, 40), ...(group ? { where: { group } } : {}) });
+const extra = list<Record<string, unknown>>(n.items).filter((q) => str(q.question));
+const grouped = bool(n.grouped) && !group;
+const groups = grouped ? [...new Set(items.map((q) => str(q.data.group)))].map((g) => ({ title: g, items: items.filter((q) => str(q.data.group) === g) })) : [{ title: "", items }];
+---
+{(items.length > 0 || extra.length > 0) && (
+<section class="ts ts-band" id="faq"><div class="ts-wrap">
+	<Head n={n} />
+	<div style="max-width:820px">
+		{groups.map((g) => <div>{g.title && <p class="ts-group">{g.title}</p>}{g.items.map((q) => <details data-tidy-record="faqs" data-tidy-record-id={q.id} data-tidy-record-label="Question"><summary>{str(q.data.title)}</summary><div class="ts-a">{str(q.data.answer)}</div></details>)}</div>)}
+		{extra.map((q) => <details><summary>{str(q.question)}</summary><div class="ts-a">{str(q.answer)}</div></details>)}
+	</div>
+</div></section>
+)}

package/src/sections/defaults/feature.astro

@@ -0,0 +1,36 @@
+---
+/** Why choose us: points as cards, a checklist, beside an image, or one mission statement. */
+import { lines, list, nodeOf, pic, str, steps } from "../lib";
+import Photo from "../Photo.astro";
+const n = nodeOf(Astro.props);
+const variant = str(n.variant, "cards");
+const points = list<Record<string, unknown>>(n.points).filter((p) => str(p.title) || str(p.body));
+const bullets = lines(n.bullets);
+const stepList = steps(n.steps);
+const photo = pic(n.image);
+const hasPhoto = Boolean(photo.image || photo.url);
+const side = str(n.image_side, "left");
+---
+<section class="ts"><div class="ts-wrap">
+	{variant === "mission statement" ? (
+		<div style="max-width:62ch">{str(n.eyebrow) && <p class="ts-eyebrow">{str(n.eyebrow)}</p>}<p style="font-family:var(--ts-display);font-size:clamp(22px,2.6vw,32px);line-height:1.25">{str(n.headline) || str(n.body)}</p>{str(n.headline) && str(n.body) && <p class="ts-muted" style="margin-top:12px">{str(n.body)}</p>}</div>
+	) : (
+	<div class={hasPhoto || variant === "image beside points" ? `ts-split ${side === "right" ? "ts-rev" : ""}` : ""}>
+		{hasPhoto && side === "left" && <Photo image={photo.image} url={photo.url} alt={str(n.headline)} ratio="wide" />}
+		<div>
+			{str(n.eyebrow) && <p class="ts-eyebrow">{str(n.eyebrow)}</p>}
+			{str(n.headline) && <h2>{str(n.headline)}</h2>}
+			{str(n.body) && <p class="ts-lede">{str(n.body)}</p>}
+			{variant === "cards" && points.length > 0 && !hasPhoto ? (
+				<div class="ts-grid" style="margin-top:24px;--cols:3">{points.map((p) => <div class="ts-card">{str(p.icon) && <span class="ts-eyebrow" style="margin:0">{str(p.icon)}</span>}<h3>{str(p.title)}</h3>{str(p.body) && <p>{str(p.body)}</p>}</div>)}</div>
+			) : points.length > 0 ? (
+				<ul class="ts-list" style="margin-top:18px">{points.map((p) => <li><span><b>{str(p.title)}</b>{str(p.body) && <> {str(p.body)}</>}</span></li>)}</ul>
+			) : null}
+			{bullets.length > 0 && <ul class="ts-list" style="margin-top:18px">{bullets.map((t) => <li>{t}</li>)}</ul>}
+			{stepList.length > 0 && <ol style="margin:18px 0 0;padding-left:20px;color:var(--ts-ink-2)">{stepList.map((s) => <li style="margin-bottom:8px"><b>{s.title}</b>{s.text && <> {s.text}</>}</li>)}</ol>}
+			{str(n.button_label) && <div class="ts-actions"><a class="ts-btn" href={str(n.button_url, "#")}>{str(n.button_label)}</a></div>}
+		</div>
+		{hasPhoto && side === "right" && <Photo image={photo.image} url={photo.url} alt={str(n.headline)} ratio="wide" />}
+	</div>
+	)}
+</div></section>

package/src/sections/defaults/financing.astro

@@ -0,0 +1,17 @@
+---
+import { bool, entries, getBusiness, lines, nodeOf, pic, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const providers = bool(n.show_providers, true) ? await entries("financing_providers", { limit: 8 }) : [];
+const methods = str(n.payment_methods).split(",").map((s) => s.trim()).filter(Boolean);
+---
+{(providers.length > 0 || methods.length > 0 || b.hsaFsaLine) && (
+<section class="ts ts-band" id="financing"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_plans) ? { href: "/plans", label: "Membership plans" } : null} />
+	<div class="ts-grid" style="--cols:3">
+		{providers.map((p) => { const lg = pic(p.data.logo); return <div class="ts-card" data-tidy-record="financing_providers" data-tidy-record-id={p.id} data-tidy-record-label="Financing provider">{(lg.image?.src || lg.url) && <img src={lg.image?.src ?? lg.url ?? ""} alt="" style="max-height:28px;width:auto" />}<h3>{str(p.data.title)}</h3>{str(p.data.rate_line) && <p>{str(p.data.rate_line)}</p>}{str(p.data.note) && <p class="ts-muted" style="font-size:13px">{str(p.data.note)}</p>}{str(p.data.apply_url) && <a href={str(p.data.apply_url)} style="font-weight:700;color:var(--ts-primary);font-size:14px">Check your options</a>}</div>; })}
+		{(methods.length > 0 || (bool(n.show_hsa, true) && b.hsaFsaLine)) && <div class="ts-card"><h3>Paying directly</h3>{methods.length > 0 && <p>{methods.join(", ")}</p>}{bool(n.show_hsa, true) && b.hsaFsaLine && <p class="ts-muted" style="font-size:13px">{b.hsaFsaLine}</p>}</div>}
+	</div>
+</div></section>
+)}

package/src/sections/defaults/gallery.astro

@@ -0,0 +1,14 @@
+---
+import { list, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const images = list<Record<string, unknown>>(n.images).map((i) => ({ p: pic(i.image), caption: str(i.caption) })).filter((i) => i.p.image || i.p.url);
+const captions = str(n.variant) === "with captions";
+---
+{images.length > 0 && (
+<section class="ts"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-gallery" style={str(n.variant) === "strip" ? "grid-template-columns:repeat(6,1fr)" : ""}>{images.map((i) => <figure style="margin:0"><Photo image={i.p.image} url={i.p.url} alt={i.caption || ""} ratio="square" />{captions && i.caption && <figcaption class="ts-muted" style="font-size:13px;margin-top:6px">{i.caption}</figcaption>}</figure>)}</div>
+</div></section>
+)}

package/src/sections/defaults/hero.astro

@@ -0,0 +1,66 @@
+---
+/** Hero: headline, subhead, buttons, and a photo, a booking card, a form, or a picker of services. */
+import { bool, entries, getBusiness, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const variant = str(n.variant, "headline and photo");
+const photo = pic(n.image);
+const button = { label: str(n.button_label) || b.ctaLabel, href: str(n.button_url) || b.bookingUrl || "/contact" };
+const button2 = str(n.button2_label) ? { label: str(n.button2_label), href: str(n.button2_url) || "#" } : b.phone ? { label: b.phone, href: b.phoneHref } : null;
+const services = variant === "headline and picker" ? await entries("services", { limit: 8 }) : [];
+const rating = b.rating ? b.rating.toFixed(1) : null;
+const showRating = bool(n.show_rating, true) && rating;
+const over = variant === "photo with headline over";
+---
+<section class={`ts ts-hero ${over ? "ts-ink" : ""}`} style={over && photo.url ? `background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)),url(${photo.url});background-size:cover;background-position:center` : undefined}>
+	<div class={`ts-wrap ${over || variant === "headline and picker" ? "" : "ts-split"}`}>
+		<div>
+			{str(n.pill) && <p class="ts-chip" style="display:inline-flex;margin-bottom:16px">{str(n.pill)}</p>}
+			{str(n.eyebrow) && <p class="ts-eyebrow">{str(n.eyebrow)}</p>}
+			<h1>{str(n.headline) || b.tagline || b.title}</h1>
+			{str(n.subhead) && <p class="ts-lede">{str(n.subhead)}</p>}
+			<div class="ts-actions">
+				<a class="ts-btn ts-btn-accent ts-btn-lg" href={button.href}>{button.label}</a>
+				{button2 && <a class="ts-btn ts-btn-outline ts-btn-lg" href={button2.href}>{button2.label}</a>}
+			</div>
+			{(showRating || bool(n.show_hours) || bool(n.show_phone)) && (
+				<p class="ts-muted" style="margin-top:18px;font-size:14px">
+					{showRating && <span><span class="ts-stars">★★★★★</span> {rating}{b.reviewCount ? ` from ${b.reviewCount} ${b.ratingSource} reviews` : ""}</span>}
+					{bool(n.show_hours) && b.hours && <span> · {b.hours}</span>}
+					{bool(n.show_phone) && b.phone && <span> · <a href={b.phoneHref}>{b.phone}</a></span>}
+				</p>
+			)}
+		</div>
+		{variant === "headline and photo" && <Photo image={photo.image} url={photo.url} alt={str(n.headline) || b.title} ratio="wide" />}
+		{variant === "headline and booking card" && (
+			<div class="ts-card" style="gap:0">
+				<Photo image={photo.image} url={photo.url} alt={b.title} ratio="wide" class="ts-hero-card-photo" />
+				<dl class="ts-kv" style="margin-top:16px">
+					{b.hours && <><dt>Hours</dt><dd>{b.hours}</dd></>}
+					{b.phone && <><dt>Call or text</dt><dd><a href={b.phoneHref}>{b.phone}</a></dd></>}
+					{b.insuranceLine && <><dt>Insurance</dt><dd>{b.insuranceLine}</dd></>}
+					{b.newPatientsLine && <><dt></dt><dd>{b.newPatientsLine}</dd></>}
+				</dl>
+				<div class="ts-actions" style="margin-top:16px"><a class="ts-btn ts-btn-accent" href={button.href}>{button.label}</a>{b.phone && <a class="ts-btn ts-btn-outline" href={b.phoneHref}>Call us</a>}</div>
+			</div>
+		)}
+		{variant === "headline and form" && (
+			<form class="ts-card ts-form" action="/api/lead" method="post">
+				<label class="ts-full">Name<input name="name" autocomplete="name" required /></label>
+				<label>Phone<input name="phone" type="tel" autocomplete="tel" /></label>
+				<label>Email<input name="email" type="email" autocomplete="email" /></label>
+				<label class="ts-full">How can we help?<textarea name="message"></textarea></label>
+				<input class="ts-hp" type="text" name="website_hp" tabindex="-1" autocomplete="off" aria-hidden="true" />
+				<div class="ts-full"><button class="ts-btn ts-btn-accent" type="submit">{button.label}</button></div>
+			</form>
+		)}
+		{variant === "headline and picker" && services.length > 0 && (
+			<div class="ts-card" style="margin-top:28px">
+				<h3>{str(n.picker_title, "What do you need?")}</h3>
+				<div class="ts-chips" style="margin-top:10px">{services.map((s) => <a class="ts-chip" href={`/services/${s.slug ?? s.id}`}>{str(s.data.title)}</a>)}</div>
+				{str(n.picker_note) && <p class="ts-muted" style="margin-top:10px;font-size:14px">{str(n.picker_note)}</p>}
+			</div>
+		)}
+	</div>
+</section>