@tideworthy/tidysites-platform 0.10.15 → 0.11.0

package/src/sections/defaults/insurance.astro

@@ -0,0 +1,22 @@
+---
+/** Insurers accepted, as logos, names or one line, with network status and government programs. */
+import { bool, entries, getBusiness, nodeOf, pic, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const variant = str(n.variant, "logos");
+const items = variant === "one line" ? [] : await entries("insurers", { limit: 60 });
+const inNet = items.filter((i) => !/out/i.test(str(i.data.network))), outNet = items.filter((i) => /out/i.test(str(i.data.network)));
+const groups = bool(n.show_network) && outNet.length ? [{ title: "In network", list: inNet }, { title: "Out of network", list: outNet }] : [{ title: "", list: items }];
+---
+{(items.length > 0 || b.insuranceLine) && (
+<section class="ts" id="insurance"><div class="ts-wrap">
+	<Head n={n} action={str(n.button_label) ? { href: str(n.button_url, "/contact"), label: str(n.button_label) } : null} />
+	{variant === "one line" || !items.length ? <p class="ts-lede" style="margin:0">{b.insuranceLine}</p> : groups.map((g) => (
+		<div>{g.title && <p class="ts-group">{g.title}</p>}
+			{variant === "logos" ? <div class="ts-logos">{g.list.map((i) => { const p = pic(i.data.logo); return <div class="ts-logo" data-tidy-record="insurers" data-tidy-record-id={i.id} data-tidy-record-label="Insurer">{(p.image?.src || p.url) && <img src={p.image?.src ?? p.url ?? ""} alt="" />}<span>{str(i.data.title)}</span></div>; })}</div> : <div class="ts-chips">{g.list.map((i) => <span class="ts-chip" data-tidy-record="insurers" data-tidy-record-id={i.id} data-tidy-record-label="Insurer">{str(i.data.title)}</span>)}</div>}
+		</div>
+	))}
+	{bool(n.show_programs, true) && b.governmentPrograms && <p class="ts-muted" style="margin-top:14px;font-size:14px">{b.governmentPrograms}</p>}
+</div></section>
+)}

package/src/sections/defaults/intro.astro

@@ -0,0 +1,11 @@
+---
+import { nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+const n = nodeOf(Astro.props);
+const photo = pic(n.image);
+const has = Boolean(photo.image || photo.url);
+---
+<section class="ts"><div class={`ts-wrap ${has ? "ts-split" : ""}`}>
+	<div>{str(n.eyebrow) && <p class="ts-eyebrow">{str(n.eyebrow)}</p>}{str(n.headline) && <h2>{str(n.headline)}</h2>}{str(n.body) && <div class="ts-prose" style="margin-top:14px;white-space:pre-line">{str(n.body)}</div>}{str(n.button_label) && <div class="ts-actions"><a class="ts-btn" href={str(n.button_url, "#")}>{str(n.button_label)}</a></div>}</div>
+	{has && <Photo image={photo.image} url={photo.url} alt={str(n.headline)} />}
+</div></section>

package/src/sections/defaults/location.astro

@@ -0,0 +1,32 @@
+---
+/** Address, hours (per day or grouped), parking and a map, for the main location or a named one. */
+import { addressLine, bool, entries, getBusiness, hoursGrouped, hoursRows, nodeOf, str, todayKey, DAYS } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const locs = await entries("locations", { limit: 20 });
+const want = str(n.location);
+const loc = (want ? locs.find((l) => (l.slug ?? l.id) === want) : locs.find((l) => bool(l.data.is_primary))) ?? locs[0] ?? null;
+const d = loc?.data ?? {};
+const addr = loc ? addressLine({ address: str(d.address), city: str(d.city), region: str(d.region), postal: str(d.postal), hideAddress: b.hideAddress }) : addressLine(b);
+const phone = str(d.phone) || b.phone;
+const grouped = str(n.hours_style, "per day") === "grouped";
+const rows = loc ? hoursRows(d) : [];
+const today = DAYS.find(([k]) => k === todayKey())?.[1];
+const mapUrl = str(d.map_url);
+const q = encodeURIComponent([b.title, addr].filter(Boolean).join(" "));
+---
+<section class="ts ts-band" id="find"><div class="ts-wrap">
+	<Head n={n} />
+	<div class={bool(n.show_map, true) ? "ts-split" : ""} style="align-items:start">
+		{bool(n.show_map, true) && (b.hideAddress ? <div class="ts-map">{b.serviceAreaLine || "We come to you."}</div> : <div class="ts-map"><iframe title="Map" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src={`https://www.google.com/maps?q=${q}&output=embed`}></iframe></div>)}
+		<div class="ts-card">
+			{addr && <><p class="ts-group" style="margin-top:0">{b.isServiceArea ? "Based in" : "Address"}</p><p>{addr}</p>{(mapUrl || !b.hideAddress) && <a href={mapUrl || `https://www.google.com/maps/search/?api=1&query=${q}`} style="font-weight:700;color:var(--ts-primary);font-size:14px">Get directions</a>}</>}
+			{(phone || b.email) && <><p class="ts-group">Reach us</p>{phone && <p><a href={b.phoneHref}>{phone}</a></p>}{b.email && <p><a href={`mailto:${b.email}`}>{b.email}</a></p>}</>}
+			<p class="ts-group">Hours</p>
+			{rows.length ? (grouped ? <table class="ts-table">{hoursGrouped(d).map((g) => <tr><td>{g.days}</td><td>{g.value}</td></tr>)}</table> : <table class="ts-table">{rows.map((r) => <tr class={r.day === today ? "ts-today" : ""}><td>{r.day}</td><td>{r.value}</td></tr>)}</table>) : <p>{b.hours || "By appointment"}</p>}
+			{(str(d.hours_note) || b.hoursNote) && <p class="ts-muted" style="font-size:13px;margin-top:6px">{str(d.hours_note) || b.hoursNote}</p>}
+			{bool(n.show_parking, true) && (str(d.parking_line) || b.parkingLine || str(d.directions_line) || b.directionsLine) && <><p class="ts-group">Getting here</p><p style="font-size:14px">{[str(d.parking_line) || b.parkingLine, str(d.directions_line) || b.directionsLine, str(d.transit_line)].filter(Boolean).join(" ")}</p></>}
+		</div>
+	</div>
+</div></section>

package/src/sections/defaults/locations.astro

@@ -0,0 +1,14 @@
+---
+import { addressLine, bool, entries, getBusiness, hoursGrouped, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const items = await entries("locations", { limit: 20 });
+---
+{items.length > 0 && (
+<section class="ts" id="locations"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${Math.min(3, items.length)}`}>{items.map((l) => { const p = pic(l.data.photo); const d = l.data; return <div class="ts-card" data-tidy-record="locations" data-tidy-record-id={l.id} data-tidy-record-label="Location">{(p.image || p.url) && <Photo image={p.image} url={p.url} alt={str(d.title)} ratio="wide" />}<h3>{str(d.title)}</h3><p>{addressLine({ address: str(d.address), city: str(d.city), region: str(d.region), postal: str(d.postal) })}</p>{str(d.phone) && <p><a href={`tel:${str(d.phone).replace(/[^\d+]/g, "")}`}>{str(d.phone)}</a></p>}{bool(n.show_hours, true) && hoursGrouped(d).length > 0 && <table class="ts-table" style="font-size:13px">{hoursGrouped(d).map((g) => <tr><td>{g.days}</td><td>{g.value}</td></tr>)}</table>}{bool(n.show_booking, true) && (str(d.booking_url) || b.bookingUrl) && <div class="ts-actions" style="margin-top:8px"><a class="ts-btn ts-btn-accent" href={str(d.booking_url) || b.bookingUrl}>{b.bookingLabel}</a></div>}</div>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/offer.astro

@@ -0,0 +1,18 @@
+---
+import { bool, entries, nodeOf, str } from "../lib";
+const n = nodeOf(Astro.props);
+const offers = await entries("offers", { limit: 20 });
+const want = str(n.offer);
+const o = (want ? offers.find((x) => (x.slug ?? x.id) === want) : offers.find((x) => bool(x.data.active, true))) ?? null;
+const ends = o ? str(o.data.ends) : "";
+const live = !o || !ends || new Date(ends).getTime() > Date.now();
+const title = str(n.headline) || (o ? str(o.data.title) : "");
+---
+{title && live && (
+<section class="ts ts-tight"><div class="ts-wrap">
+	<div class="ts-offer" {...(o ? { "data-tidy-record": "offers", "data-tidy-record-id": o.id, "data-tidy-record-label": "Offer" } : {})}>
+		<div>{ends && <p class="ts-eyebrow">Until {new Date(ends).toLocaleDateString("en-CA", { month: "long", day: "numeric" })}</p>}<h3 style="font-size:24px">{title}{o && str(o.data.value) ? ` · ${str(o.data.value)}` : ""}</h3>{(str(n.body) || (o && str(o.data.summary))) && <p style="margin-top:6px;color:var(--ts-ink-2)">{str(n.body) || str(o!.data.summary)}</p>}{o && str(o.data.how_to_claim) && <p class="ts-muted" style="font-size:13px;margin-top:6px">{str(o.data.how_to_claim)}</p>}</div>
+		<a class="ts-btn ts-btn-accent ts-btn-lg" href={str(n.button_url) || (o && str(o.data.cta_url)) || "/contact"}>{str(n.button_label) || (o && str(o.data.cta_label)) || "Claim this offer"}</a>
+	</div>
+</div></section>
+)}

package/src/sections/defaults/options.astro

@@ -0,0 +1,12 @@
+---
+import { bool, facts, list, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = list<Record<string, unknown>>(n.items).filter((i) => str(i.title));
+---
+{items.length > 0 && (
+<section class="ts"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${Math.min(3, items.length)}`}>{items.map((o) => <div class="ts-card" style={bool(o.featured) ? "border-color:var(--ts-primary)" : ""}>{str(o.tag) && <p class="ts-eyebrow" style="margin:0">{str(o.tag)}</p>}<h3>{str(o.title)}</h3>{str(o.price) && <p class="ts-price" style="font-size:30px">{str(o.price)}{str(o.price_note) && <small>{str(o.price_note)}</small>}</p>}{str(o.summary) && <p>{str(o.summary)}</p>}{facts(o.facts).length > 0 && <dl class="ts-kv" style="font-size:14px">{facts(o.facts).map(([k, v]) => <><dt>{k}</dt><dd>{v}</dd></>)}</dl>}{str(o.button_label) && <div class="ts-actions" style="margin-top:8px"><a class="ts-btn" href={str(o.button_url, "/contact")}>{str(o.button_label)}</a></div>}</div>)}</div>
+</div></section>
+)}

package/src/sections/defaults/plans.astro

@@ -0,0 +1,16 @@
+---
+import { bool, entries, int, lines, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+let items = await entries("plans", { limit: int(n.limit, 6) });
+if (str(n.kind)) items = items.filter((p) => str(p.data.kind) === str(n.kind));
+if (bool(n.featured_first, true)) items = [...items].sort((a, b) => Number(bool(b.data.featured)) - Number(bool(a.data.featured)));
+---
+{items.length > 0 && (
+<section class="ts" id="plans"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${Math.min(3, items.length)}`}>
+		{items.map((p) => <div class="ts-card" data-tidy-record="plans" data-tidy-record-id={p.id} data-tidy-record-label="Plan" style={bool(p.data.featured) ? "border-color:var(--ts-primary)" : ""}>{str(p.data.tag) && <p class="ts-eyebrow" style="margin:0">{str(p.data.tag)}</p>}<h3>{str(p.data.title)}</h3>{str(p.data.price) && <p class="ts-price">{str(p.data.price)}{str(p.data.cadence) && <small>/ {str(p.data.cadence)}</small>}</p>}{str(p.data.summary) && <p>{str(p.data.summary)}</p>}{lines(p.data.includes).length > 0 && <ul class="ts-list">{lines(p.data.includes).map((l) => <li>{l}</li>)}</ul>}{str(p.data.eligibility) && <p class="ts-muted" style="font-size:13px">{str(p.data.eligibility)}</p>}{str(p.data.cta_label) && <div class="ts-actions" style="margin-top:12px"><a class="ts-btn ts-btn-accent" href={str(p.data.cta_url, "/contact")}>{str(p.data.cta_label)}</a></div>}{str(p.data.note) && <p class="ts-muted" style="font-size:12px">{str(p.data.note)}</p>}</div>)}
+	</div>
+</div></section>
+)}

package/src/sections/defaults/policies.astro

@@ -0,0 +1,13 @@
+---
+import { entries, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+let items = await entries("policies", { limit: 20 });
+if (str(n.group)) items = items.filter((p) => str(p.data.group) === str(n.group));
+---
+{items.length > 0 && (
+<section class="ts ts-band" id="policies"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style="--cols:3">{items.map((p) => <div class="ts-card" data-tidy-record="policies" data-tidy-record-id={p.id} data-tidy-record-label="Policy"><h3>{str(p.data.title)}</h3><p style="white-space:pre-line">{str(p.data.body)}</p></div>)}</div>
+</div></section>
+)}

package/src/sections/defaults/posts.astro

@@ -0,0 +1,14 @@
+---
+import { bool, entries, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+let items = await entries("posts", { limit: int(n.limit, 3), orderBy: { createdAt: "desc" } as never });
+if (str(n.category)) items = items.filter((p) => str(p.data.category) === str(n.category));
+---
+{items.length > 0 && (
+<section class="ts"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_all, true) ? { href: "/blog", label: "All posts" } : null} />
+	<div class="ts-grid" style="--cols:3">{items.map((p) => { const ph = pic(p.data.featured_image); return <a class="ts-card" href={`/blog/${p.slug ?? p.id}`}><Photo image={ph.image} url={ph.url} alt={str(p.data.title)} ratio="wide" />{str(p.data.category) && <p class="ts-eyebrow" style="margin:0">{str(p.data.category)}</p>}<h3>{str(p.data.title)}</h3>{str(p.data.summary) && <p>{str(p.data.summary)}</p>}</a>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/products.astro

@@ -0,0 +1,17 @@
+---
+import { bool, entries, getBusiness, int, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+let items = await entries("products", { limit: int(n.limit, 8) });
+if (str(n.category)) items = items.filter((p) => str(p.data.category) === str(n.category));
+if (str(n.variant) === "featured") items = items.filter((p) => bool(p.data.featured));
+const prices = bool(n.show_prices, true);
+---
+{items.length > 0 && (
+<section class="ts" id="products"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_store_button, true) && b.storeUrl ? { href: b.storeUrl, label: b.storeLabel } : null} />
+	<div class="ts-grid" style={`--cols:${str(n.variant) === "list" ? 1 : 4}`}>{items.map((p) => { const ph = pic(p.data.image); return <a class="ts-card" href={str(p.data.buy_url) || `/products/${p.slug ?? p.id}`} data-tidy-record="products" data-tidy-record-id={p.id} data-tidy-record-label="Product"><Photo image={ph.image} url={ph.url} alt={str(p.data.title)} ratio="square" /><h3 style="font-size:17px">{str(p.data.title)}</h3>{str(p.data.summary) && <p>{str(p.data.summary)}</p>}{prices && str(p.data.price) && <p style="font-weight:700">{str(p.data.price)}{str(p.data.unit) && <span class="ts-muted" style="font-weight:400"> / {str(p.data.unit)}</span>}{str(p.data.compare_price) && <s class="ts-muted" style="margin-left:8px;font-weight:400">{str(p.data.compare_price)}</s>}</p>}{str(p.data.availability_line) && <p class="ts-muted" style="font-size:12.5px">{str(p.data.availability_line)}</p>}</a>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/related.astro

@@ -0,0 +1,17 @@
+---
+/** Other services in the same category as the service on the page. */
+import { entries, int, nodeOf, str } from "../lib";
+const props = Astro.props as Record<string, unknown>;
+const n = nodeOf(props);
+const ctx = (props.context as Record<string, unknown> | null) ?? null;
+const cat = ctx ? String(ctx.category ?? "") : "";
+const selfId = ctx ? String(ctx.id ?? "") : "";
+let items = await entries("services", { limit: 40 });
+items = items.filter((s) => s.id !== selfId && (!cat || String(s.data.category ?? "") === cat)).slice(0, int(n.limit, 4));
+---
+{items.length > 0 && (
+<section class="ts ts-tight ts-band"><div class="ts-wrap">
+	<h3 style="margin-bottom:14px">{str(n.headline) || "Related services"}</h3>
+	<div class="ts-grid" style="--cols:4">{items.map((s) => <a class="ts-card" href={`/services/${s.slug ?? s.id}`}><h4>{str(s.data.title)}</h4></a>)}</div>
+</div></section>
+)}

package/src/sections/defaults/reviews.astro

@@ -0,0 +1,44 @@
+---
+/** Reviews from the records, with the business's rating and count beside them. */
+import { bool, entries, getBusiness, int, nodeOf, pic, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const b = await getBusiness(Astro.request);
+const variant = str(n.variant, "aggregate with quotes");
+const where: Record<string, string> = {};
+if (bool(n.featured_only)) where.featured = "1";
+let items = await entries("reviews", { limit: int(n.limit, 3), where });
+const svc = str(n.service), area = str(n.service_area);
+if (svc) items = items.filter((r) => String(r.data.service ?? "") === svc || true);
+if (variant === "video testimonials") items = items.filter((r) => str(r.data.video_url));
+const rating = b.rating ? b.rating.toFixed(1) : null;
+const stars = (v: unknown) => { const r = typeof v === "number" ? Math.max(1, Math.min(5, Math.round(v))) : 5; return "★".repeat(r); };
+const embed = (u: string) => u.replace("watch?v=", "embed/").replace("youtu.be/", "www.youtube.com/embed/");
+const who = (r: { data: Record<string, unknown> }) => str(r.data.display_name) || str(r.data.title);
+const when = (r: { data: Record<string, unknown> }) => { const d = str(r.data.date); return d ? new Date(d).toLocaleDateString("en-CA", { month: "long", year: "numeric" }) : ""; };
+---
+{(items.length > 0 || (bool(n.show_aggregate, true) && rating)) && (
+<section class="ts" id="reviews"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_review_links) && b.reviewsUrl ? { href: b.reviewsUrl, label: "Read them all" } : null} />
+	{variant === "single quote band" && items[0] ? (
+		<div style="max-width:64ch"><p class="ts-stars">{stars(items[0].data.rating)}</p><p style="font-family:var(--ts-display);font-size:clamp(22px,2.4vw,30px);line-height:1.3;margin-top:12px">“{str(items[0].data.quote)}”</p><p class="ts-muted" style="margin-top:12px">{who(items[0])}{bool(n.show_source, true) && str(items[0].data.source) ? ` · ${str(items[0].data.source)}` : ""}</p></div>
+	) : variant === "video testimonials" ? (
+		<div class="ts-grid" style="--cols:3">{items.map((r) => <div><div class="ts-video"><iframe src={embed(str(r.data.video_url))} title={who(r)} loading="lazy" allowfullscreen></iframe></div><p style="margin-top:8px;font-weight:600">{who(r)}</p></div>)}</div>
+	) : (
+	<div class={variant === "aggregate with quotes" && rating ? "ts-split ts-rev" : ""} style={variant === "aggregate with quotes" && rating ? "align-items:start" : ""}>
+		{variant === "aggregate with quotes" && rating && (
+			<aside class="ts-card"><span style="font-family:var(--ts-display);font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1">{rating}</span><span class="ts-stars">★★★★★</span>{b.reviewCount && <p class="ts-muted">{b.reviewCount} {b.ratingSource} reviews</p>}{b.reviewsUrl && <div class="ts-chips" style="margin-top:12px"><a class="ts-chip" href={b.reviewsUrl}>Read them all</a><a class="ts-chip" href={b.reviewsUrl}>Leave a review</a></div>}</aside>
+		)}
+		<div class="ts-grid" style={`--cols:${variant === "aggregate with quotes" ? 1 : 3}`}>
+			{items.map((r) => { const ph = pic(r.data.photo); return (
+				<article class="ts-card ts-review" data-tidy-record="reviews" data-tidy-record-id={r.id} data-tidy-record-label="Review">
+					<span class="ts-stars" aria-label={`${stars(r.data.rating).length} stars`}>{stars(r.data.rating)}</span>
+					<blockquote>{str(r.data.quote)}</blockquote>
+					<div class="ts-who">{(ph.image || ph.url) && <span class="ts-avatar"><img src={ph.image?.src ?? ph.url ?? ""} alt="" /></span>}<div><b>{who(r)}</b><span>{[bool(n.show_source, true) ? str(r.data.source) : "", when(r)].filter(Boolean).join(" · ")}</span></div></div>
+				</article>
+			); })}
+		</div>
+	</div>
+	)}
+</div></section>
+)}

package/src/sections/defaults/services.astro

@@ -0,0 +1,49 @@
+---
+/** Services or categories from the records, in one of five layouts. */
+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, "cards with summary");
+const source = str(n.source, "services");
+const limit = int(n.limit, 12);
+let items: Array<{ id: string; slug?: string | null; data: Record<string, unknown>; href: string }> = [];
+let groups: Array<{ title: string; items: typeof items }> = [];
+const svc = (e: { id: string; slug?: string | null; data: Record<string, unknown> }) => ({ ...e, href: `/services/${e.slug ?? e.id}` });
+if (source === "categories") items = (await entries("service_categories", { limit })).map((e) => ({ ...e, href: `/services/category/${e.slug ?? e.id}` }));
+else if (source === "featured services") items = (await entries("services", { limit, where: { featured: "1" } })).map(svc);
+else if (source === "services in one category" && str(n.category)) {
+	const cats = await entries("service_categories");
+	const cat = cats.find((c) => (c.slug ?? c.id) === str(n.category));
+	items = (cat ? await entries("services", { limit, where: { category: String(cat.id) } }) : []).map(svc);
+} else items = (await entries("services", { limit })).map(svc);
+if (variant === "grouped by category") {
+	const cats = await entries("service_categories");
+	const all = (await entries("services", { limit: 100 })).map(svc);
+	groups = cats.map((c) => ({ title: str(c.data.title), items: all.filter((s) => String(s.data.category ?? "") === String(c.id)) })).filter((g) => g.items.length);
+	if (!groups.length) groups = [{ title: "", items: all }];
+}
+const showAll = bool(n.show_all, true);
+---
+{(items.length > 0 || groups.length > 0) && (
+<section class="ts ts-band" id="services"><div class="ts-wrap">
+	<Head n={n} action={showAll ? { href: "/services", label: "All services" } : null} />
+	{variant === "checklist" ? (
+		<ul class="ts-list" style="columns:2;gap:28px">{items.map((s) => <li><a href={s.href}>{str(s.data.title)}</a></li>)}</ul>
+	) : variant === "grouped by category" ? (
+		groups.map((g) => <div>{g.title && <p class="ts-group">{g.title}</p>}<div class="ts-chips">{g.items.map((s) => <a class="ts-chip" href={s.href} data-tidy-record="services" data-tidy-record-id={s.id} data-tidy-record-label="Service details">{str(s.data.title)}</a>)}</div></div>)
+	) : (
+		<div class="ts-grid" style={`--cols:${variant === "image tiles" ? 3 : 3}`}>
+			{items.map((s) => (
+				<a class="ts-card" href={s.href} data-tidy-record={source === "categories" ? "service_categories" : "services"} data-tidy-record-id={s.id} data-tidy-record-label={source === "categories" ? "Category details" : "Service details"}>
+					{variant === "image tiles" && (() => { const p = pic(s.data.featured_image); return <Photo image={p.image} url={p.url} alt={str(s.data.title)} ratio="wide" />; })()}
+					{variant === "icon cards" && str(s.data.icon) && <span class="ts-eyebrow" style="margin:0">{str(s.data.icon)}</span>}
+					<h3>{str(s.data.title)}</h3>
+					{variant !== "image tiles" && str(s.data.summary) && <p>{str(s.data.summary)}</p>}
+					{str(s.data.price_from) && <p class="ts-muted" style="font-size:13px">From {str(s.data.price_from)}</p>}
+				</a>
+			))}
+		</div>
+	)}
+</div></section>
+)}

package/src/sections/defaults/signs.astro

@@ -0,0 +1,12 @@
+---
+import { list, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = list<Record<string, unknown>>(n.items).filter((i) => str(i.title));
+---
+{items.length > 0 && (
+<section class="ts ts-band"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style="--cols:3">{items.map((i) => <div class="ts-card">{str(i.icon) && <span class="ts-eyebrow" style="margin:0">{str(i.icon)}</span>}<h3>{str(i.title)}</h3>{str(i.text) && <p>{str(i.text)}</p>}</div>)}</div>
+</div></section>
+)}

package/src/sections/defaults/stats.astro

@@ -0,0 +1,13 @@
+---
+/** Value and label tiles. A tile with no value is left out, never shown as a zero. */
+import { list, nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const tiles = list<Record<string, unknown>>(n.tiles).filter((t) => str(t.value) && str(t.value) !== "0");
+---
+{tiles.length > 0 && (
+<section class="ts ts-tight"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style={`--cols:${Math.min(4, tiles.length)}`}>{tiles.map((t) => <div class="ts-card ts-stat"><b>{str(t.value)}</b><span>{str(t.label)}{str(t.source) ? ` · ${str(t.source)}` : ""}</span></div>)}</div>
+</div></section>
+)}

package/src/sections/defaults/steps.astro

@@ -0,0 +1,32 @@
+---
+/** A real sequence: a first visit, a treatment, aftercare. */
+import { bool, entries, lines, list, nodeOf, pic, str } from "../lib";
+import Photo from "../Photo.astro";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const items = list<Record<string, unknown>>(n.steps).filter((s) => str(s.title));
+const prep = lines(n.prep);
+const forms = bool(n.show_forms) ? await entries("downloads", { limit: 6 }) : [];
+const aside = bool(n.show_prep) && (prep.length > 0 || forms.length > 0);
+---
+{items.length > 0 && (
+<section class="ts"><div class="ts-wrap">
+	<Head n={n} />
+	<div class={aside ? "ts-split" : ""}>
+		<div class="ts-steps">
+			{items.map((s, i) => (
+				<div class="ts-step">
+					<span class="ts-n">{str(s.duration) || String(i + 1).padStart(2, "0")}</span>
+					<div><h3>{str(s.title)}</h3>{str(s.body) && <p>{str(s.body)}</p>}{(() => { const p = pic(s.image); return p.image || p.url ? <Photo image={p.image} url={p.url} alt={str(s.title)} ratio="wide" class="ts-step-photo" /> : null; })()}</div>
+				</div>
+			))}
+		</div>
+		{aside && (
+			<aside class="ts-card">
+				{prep.length > 0 && <><h3>Bring with you</h3><ul class="ts-list" style="margin-top:10px">{prep.map((p) => <li>{p}</li>)}</ul></>}
+				{forms.length > 0 && <div class="ts-chips" style="margin-top:14px">{forms.map((f) => <a class="ts-chip" href={str(f.data.file_url, "#")}>{str(f.data.title)}</a>)}</div>}
+			</aside>
+		)}
+	</div>
+</div></section>
+)}

package/src/sections/defaults/team.astro

@@ -0,0 +1,42 @@
+---
+/** People from the records: cards, grouped by department, a photo grid, or one person featured. */
+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, "cards");
+const limit = int(n.limit, 24);
+const group = str(n.group);
+let people = await entries("people", { limit: 100 });
+if (group) people = people.filter((p) => str(p.data.group) === group);
+if (bool(n.featured_only)) people = people.filter((p) => bool(p.data.is_owner) || str(p.data.credentials));
+people = people.slice(0, limit);
+const showCred = bool(n.show_credentials, true), showBio = bool(n.show_bio, true);
+const name = (p: { data: Record<string, unknown> }) => str(p.data.display_name) || str(p.data.title);
+const groups = variant === "grouped by department" ? [...new Set(people.map((p) => str(p.data.group)))].map((g) => ({ title: g, items: people.filter((p) => str(p.data.group) === g) })) : [];
+const href = (p: { slug?: string | null; id: string; data: Record<string, unknown> }) => (bool(p.data.has_profile) ? `/team/${p.slug ?? p.id}` : null);
+---
+{people.length > 0 && (
+<section class="ts ts-band" id="team"><div class="ts-wrap">
+	<Head n={n} action={bool(n.show_all, true) ? { href: "/team", label: "Meet the team" } : null} />
+	{variant === "one person featured" ? (() => { const p = people[0]!; const ph = pic(p.data.photo); return (
+		<div class="ts-split"><Photo image={ph.image} url={ph.url} alt={name(p)} ratio="tall" /><div data-tidy-record="people" data-tidy-record-id={p.id} data-tidy-record-label="Team member"><p class="ts-role">{str(p.data.role)}{showCred && str(p.data.credentials) ? ` · ${str(p.data.credentials)}` : ""}</p><h3 style="font-size:28px;margin-top:6px">{name(p)}</h3>{str(p.data.bio) && <p class="ts-prose" style="margin-top:12px">{str(p.data.bio)}</p>}{href(p) && <div class="ts-actions"><a class="ts-btn ts-btn-outline" href={href(p)!}>Full bio</a></div>}</div></div>
+	); })() : variant === "photo grid" ? (
+		<div class="ts-gallery">{people.map((p) => { const ph = pic(p.data.photo); return <div data-tidy-record="people" data-tidy-record-id={p.id} data-tidy-record-label="Team member"><Photo image={ph.image} url={ph.url} alt={name(p)} ratio="square" /><p style="margin-top:6px;font-weight:600;font-size:14px">{name(p)}</p></div>; })}</div>
+	) : (groups.length ? groups : [{ title: "", items: people }]).map((g) => (
+		<div>{g.title && <p class="ts-group">{g.title}</p>}
+		<div class="ts-grid" style="--cols:3">
+			{g.items.map((p) => { const ph = pic(p.data.photo); const h = href(p); return (
+				<div class="ts-card" data-tidy-record="people" data-tidy-record-id={p.id} data-tidy-record-label="Team member">
+					{(ph.image || ph.url) && <Photo image={ph.image} url={ph.url} alt={name(p)} ratio="tall" />}
+					<div><span class="ts-person-name">{name(p)}</span>{showCred && str(p.data.credentials) && <span class="ts-muted" style="font-size:13px"> · {str(p.data.credentials)}</span>}</div>
+					{str(p.data.role) && <p class="ts-role">{str(p.data.role)}</p>}
+					{showBio && str(p.data.bio) && <p>{str(p.data.bio)}</p>}
+					{str(p.data.languages) && <p class="ts-muted" style="font-size:13px">{str(p.data.languages)}</p>}
+					{h && <a href={h} style="font-weight:700;font-size:14px;color:var(--ts-primary)">Full bio</a>}
+				</div>
+			); })}
+		</div></div>
+	))}
+</div></section>
+)}

package/src/sections/defaults/technologies.astro

@@ -0,0 +1,13 @@
+---
+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("technologies", { limit: int(n.limit, 6) });
+---
+{items.length > 0 && (
+<section class="ts ts-band"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-grid" style="--cols:3">{items.map((t) => { const p = pic(t.data.image); return <div class="ts-card" data-tidy-record="technologies" data-tidy-record-id={t.id} data-tidy-record-label="Technology">{(p.image || p.url) && <Photo image={p.image} url={p.url} alt={str(t.data.title)} ratio="wide" />}<h3>{str(t.data.title)}{str(t.data.brand) && <span class="ts-muted" style="font-weight:400;font-size:14px"> · {str(t.data.brand)}</span>}</h3>{str(t.data.summary) && <p>{str(t.data.summary)}</p>}{bool(t.data.has_page) && <a href={`/technology/${t.slug ?? t.id}`} style="font-weight:700;color:var(--ts-primary);font-size:14px">Learn more</a>}</div>; })}</div>
+</div></section>
+)}

package/src/sections/defaults/video.astro

@@ -0,0 +1,15 @@
+---
+import { nodeOf, str } from "../lib";
+import Head from "./_Head.astro";
+const n = nodeOf(Astro.props);
+const url = str(n.video_url);
+const embed = url.replace("watch?v=", "embed/").replace("youtu.be/", "www.youtube.com/embed/").replace("vimeo.com/", "player.vimeo.com/video/");
+const isFile = /\.(mp4|webm|mov)(\?|$)/i.test(url);
+---
+{url && (
+<section class="ts"><div class="ts-wrap">
+	<Head n={n} />
+	<div class="ts-video">{isFile ? <video src={url} controls playsinline></video> : <iframe src={embed} title={str(n.headline) || "Video"} loading="lazy" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>}</div>
+	{str(n.caption) && <p class="ts-muted" style="margin-top:10px;font-size:14px">{str(n.caption)}</p>}
+</div></section>
+)}

package/src/sections/defaults.css

@@ -0,0 +1,112 @@
+/* Default section styling. Plain, readable, and driven by the brand tokens a
+   theme or the layout sets on <html>: --brand-primary, --brand-accent,
+   --brand-font-display, --brand-font-body. Everything is namespaced ts- so a
+   theme's own styles never collide. A theme that renders a type itself never
+   loads these rules for it. */
+.ts{--ts-ink:var(--ink,#17211c);--ts-ink-2:var(--ink-2,#4a5851);--ts-ink-3:var(--ink-3,#7b877f);--ts-line:var(--line,#d6ddd9);--ts-ground:var(--ground,#f6f7f5);--ts-surface:var(--surface,#fff);--ts-primary:var(--primary,var(--brand-primary,#1e5a46));--ts-primary-ink:var(--primary-ink,var(--brand-primary-ink,#fff));--ts-accent:var(--accent,var(--brand-accent,#e8b23a));--ts-accent-ink:var(--accent-ink,var(--brand-accent-ink,#111));--ts-display:var(--brand-font-display,system-ui,sans-serif);--ts-body:var(--brand-font-body,system-ui,sans-serif);--ts-radius:var(--brand-radius,10px);--ts-max:var(--max,1180px);--ts-gutter:var(--gutter,clamp(16px,4vw,40px));--ts-space:var(--space,clamp(48px,7vw,96px));
+  font-family:var(--ts-body);color:var(--ts-ink);padding:var(--ts-space) 0;line-height:1.55}
+.ts.ts-band{background:var(--ts-surface-2,color-mix(in srgb,var(--ts-primary) 8%,var(--ts-ground)))}
+.ts.ts-ink{background:var(--ts-ink);color:#fff}
+.ts.ts-tight{padding:calc(var(--ts-space) * .55) 0}
+.ts *{box-sizing:border-box}
+.ts .ts-wrap{max-width:var(--ts-max);margin:0 auto;padding:0 var(--ts-gutter)}
+.ts h1,.ts h2,.ts h3,.ts h4{font-family:var(--ts-display);line-height:1.1;margin:0;letter-spacing:-.01em}
+.ts h1{font-size:clamp(34px,5vw,60px);letter-spacing:-.02em}
+.ts h2{font-size:clamp(26px,3.2vw,40px)}
+.ts h3{font-size:20px}
+.ts h4{font-size:16px}
+.ts p{margin:0}
+.ts a{color:inherit}
+.ts img{display:block;max-width:100%;height:auto}
+.ts .ts-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ts-primary);margin-bottom:10px}
+.ts.ts-ink .ts-eyebrow{color:color-mix(in srgb,var(--ts-accent) 70%,#fff)}
+.ts .ts-lede{font-size:18px;color:var(--ts-ink-2);max-width:60ch;margin-top:12px}
+.ts.ts-ink .ts-lede,.ts.ts-ink .ts-muted{color:rgba(255,255,255,.78)}
+.ts .ts-muted{color:var(--ts-ink-3)}
+.ts .ts-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap}
+.ts .ts-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ts-display);font-weight:700;font-size:15px;padding:12px 20px;border-radius:999px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;background:var(--ts-primary);color:var(--ts-primary-ink)}
+.ts .ts-btn-accent{background:var(--ts-accent);color:var(--ts-accent-ink)}
+.ts .ts-btn-outline{background:transparent;color:inherit;border-color:currentColor;opacity:.9}
+.ts .ts-btn-lg{padding:15px 24px;font-size:16px}
+.ts .ts-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
+.ts .ts-grid{display:grid;gap:18px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
+@media (max-width:960px){.ts .ts-grid{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr))}}
+@media (max-width:600px){.ts .ts-grid{grid-template-columns:1fr}}
+.ts .ts-split{display:grid;gap:clamp(24px,5vw,64px);grid-template-columns:1.1fr .9fr;align-items:center}
+.ts .ts-split.ts-rev{grid-template-columns:.9fr 1.1fr}
+@media (max-width:860px){.ts .ts-split,.ts .ts-split.ts-rev{grid-template-columns:1fr}}
+.ts .ts-card{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-radius);padding:22px;color:var(--ts-ink);text-decoration:none;display:flex;flex-direction:column;gap:8px}
+.ts.ts-ink .ts-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
+.ts a.ts-card:hover{border-color:var(--ts-primary)}
+.ts .ts-card p{color:var(--ts-ink-2);font-size:15px}
+.ts.ts-ink .ts-card p{color:rgba(255,255,255,.75)}
+.ts .ts-chips{display:flex;flex-wrap:wrap;gap:8px}
+.ts .ts-chip{font-size:13px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--ts-line);background:var(--ts-surface);color:var(--ts-ink-2);text-decoration:none}
+.ts .ts-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
+.ts .ts-list li{display:flex;gap:10px;color:var(--ts-ink-2)}
+.ts .ts-list li::before{content:"✓";color:var(--ts-primary);font-weight:700;flex:none}
+.ts .ts-photo{position:relative;overflow:hidden;border-radius:var(--ts-radius);background:color-mix(in srgb,var(--ts-primary) 12%,var(--ts-surface));display:grid;place-items:center;color:var(--ts-ink-3);font-size:13px;text-align:center;padding:12px}
+.ts .ts-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
+.ts .ts-photo-wide{aspect-ratio:16/10}.ts .ts-photo-tall{aspect-ratio:4/5}.ts .ts-photo-square{aspect-ratio:1}.ts .ts-photo-video{aspect-ratio:16/9}
+.ts .ts-photo-has{padding:0}
+.ts .ts-stars{color:var(--ts-accent);letter-spacing:1px;font-size:15px}
+.ts .ts-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--ts-primary) 15%,var(--ts-surface));flex:none;display:block}
+.ts .ts-avatar img{width:100%;height:100%;object-fit:cover}
+.ts .ts-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:15px}
+.ts .ts-kv dt{color:var(--ts-ink-3)}.ts .ts-kv dd{margin:0}
+.ts .ts-table{width:100%;border-collapse:collapse;font-size:15px}
+.ts .ts-table td{padding:8px 0;border-top:1px solid var(--ts-line)}
+.ts .ts-table tr:first-child td{border-top:0}
+.ts .ts-table td:last-child{text-align:right;font-variant-numeric:tabular-nums}
+.ts .ts-table tr.ts-today td{color:var(--ts-primary);font-weight:700}
+.ts .ts-steps{display:grid;gap:0}
+.ts .ts-step{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--ts-line)}
+.ts .ts-step:last-child{border-bottom:1px solid var(--ts-line)}
+.ts .ts-step .ts-n{font-family:var(--ts-display);font-weight:800;font-size:22px;color:var(--ts-primary)}
+.ts .ts-step p{color:var(--ts-ink-2);margin-top:4px}
+.ts details{border-top:1px solid var(--ts-line);padding:4px 0}
+.ts details:last-of-type{border-bottom:1px solid var(--ts-line)}
+.ts summary{cursor:pointer;list-style:none;font-family:var(--ts-display);font-weight:700;font-size:18px;padding:14px 0;display:flex;justify-content:space-between;gap:16px}
+.ts summary::-webkit-details-marker{display:none}
+.ts summary::after{content:"+";color:var(--ts-primary);font-weight:400}
+.ts details[open] summary::after{content:"–"}
+.ts details .ts-a{padding:0 0 16px;color:var(--ts-ink-2);max-width:64ch;white-space:pre-line}
+.ts .ts-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+.ts .ts-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ts-ink-2)}
+.ts .ts-form input,.ts .ts-form select,.ts .ts-form textarea{font:inherit;font-size:15px;padding:12px 13px;border:1.5px solid var(--ts-line);border-radius:calc(var(--ts-radius) * .7);background:var(--ts-surface);color:var(--ts-ink);width:100%}
+.ts .ts-form textarea{min-height:110px}
+.ts .ts-form .ts-full{grid-column:1/-1}
+.ts .ts-form .ts-choices{display:flex;flex-wrap:wrap;gap:8px}
+.ts .ts-form .ts-choices label{flex-direction:row;align-items:center;gap:8px;font-weight:500;padding:9px 12px;border:1.5px solid var(--ts-line);border-radius:999px;background:var(--ts-surface)}
+.ts .ts-form .ts-hp{position:absolute;left:-10000px;width:1px;height:1px}
+@media (max-width:640px){.ts .ts-form{grid-template-columns:1fr}}
+.ts .ts-stat{text-align:left}
+.ts .ts-stat b{display:block;font-family:var(--ts-display);font-size:40px;letter-spacing:-.03em;line-height:1}
+.ts .ts-stat span{display:block;font-size:13px;color:var(--ts-ink-3);margin-top:6px}
+.ts .ts-logos{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
+.ts .ts-logo{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--ts-radius);background:var(--ts-surface);border:1px solid var(--ts-line);font-weight:600;font-size:14px}
+.ts .ts-logo img{max-height:32px;width:auto}
+.ts .ts-price{font-family:var(--ts-display);font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}
+.ts .ts-price small{font-family:var(--ts-body);font-size:13px;font-weight:500;color:var(--ts-ink-3);margin-left:6px;letter-spacing:0}
+.ts .ts-ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:var(--ts-radius);overflow:hidden}
+.ts .ts-ba .ts-photo{border-radius:0}
+.ts .ts-ba .ts-tag{position:absolute;left:10px;top:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.9);color:#111;padding:4px 7px;border-radius:6px;z-index:1}
+.ts .ts-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
+@media (max-width:700px){.ts .ts-gallery{grid-template-columns:repeat(2,1fr)}}
+.ts .ts-map{min-height:320px;border-radius:var(--ts-radius);border:1px solid var(--ts-line);background:color-mix(in srgb,var(--ts-primary) 8%,var(--ts-surface));display:grid;place-items:center;color:var(--ts-ink-3);font-size:14px}
+.ts .ts-map iframe{width:100%;height:100%;min-height:320px;border:0;border-radius:var(--ts-radius)}
+.ts .ts-video{position:relative;aspect-ratio:16/9;border-radius:var(--ts-radius);overflow:hidden;background:#111}
+.ts .ts-video iframe,.ts .ts-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
+.ts .ts-frame{width:100%;border:0;display:block}
+.ts .ts-offer{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:26px 28px;border-radius:var(--ts-radius);background:color-mix(in srgb,var(--ts-accent) 18%,var(--ts-surface));border:1px solid color-mix(in srgb,var(--ts-accent) 50%,var(--ts-line))}
+@media (max-width:700px){.ts .ts-offer{grid-template-columns:1fr}}
+.ts .ts-person-name{font-family:var(--ts-display);font-weight:700;font-size:18px}
+.ts .ts-role{font-size:14px;color:var(--ts-primary);font-weight:600}
+.ts .ts-group{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ts-ink-3);font-weight:700;margin:26px 0 10px}
+.ts .ts-review blockquote{margin:0;font-size:16px;color:var(--ts-ink-2)}
+.ts .ts-review .ts-who{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px}
+.ts .ts-review .ts-who b{display:block}
+.ts .ts-review .ts-who span{color:var(--ts-ink-3);font-size:12.5px}
+.ts .ts-missing{padding:12px;border:1px dashed #c33;color:#c33;border-radius:8px;margin:12px}
+.ts .ts-prose{color:var(--ts-ink-2);max-width:66ch}
+.ts .ts-prose p+p{margin-top:12px}