@atelic-action/ui 0.17.2 → 1.0.0

package/src/sections/LegalPage.tsx

@@ -0,0 +1,43 @@
+import { type ProseBlock, ProseBlocks } from "../primitives/ProseBlocks";
+
+/**
+ * Legal documents are prose blocks like any other ported document, so the
+ * block vocabulary and the renderer are shared with the blog rather than
+ * duplicated. Re-exported because a client site importing `LegalDoc` should
+ * not need to know where the block type happens to live.
+ */
+export type LegalBlock = ProseBlock;
+
+export interface LegalDoc {
+	/** The document's own title, as the source states it. */
+	title: string;
+	/** The source's own revision date, verbatim. Null when it states none. */
+	lastUpdated?: string | null;
+	blocks: LegalBlock[];
+}
+
+export interface LegalPageProps {
+	doc: LegalDoc;
+	id?: string;
+	className?: string;
+}
+
+/**
+ * Renders a legal document: terms, a privacy policy, a disclaimer. Content
+ * arrives entirely as data so a client's published wording can be ported
+ * without passing through anyone's judgment about what it should say.
+ *
+ * All-caps passages are left exactly as the source sets them. Legal drafting
+ * uses capitals to make a clause conspicuous, which carries actual legal
+ * weight in some jurisdictions, so it is never normalised away here.
+ */
+export function LegalPage({ doc, id, className }: LegalPageProps) {
+	return (
+		<section className={["section", "legal", className].filter(Boolean).join(" ")} id={id}>
+			<div className="wrap">
+				{doc.lastUpdated && <p className="legal-updated">Last updated: {doc.lastUpdated}</p>}
+				<ProseBlocks blocks={doc.blocks} />
+			</div>
+		</section>
+	);
+}

package/src/sections/LocationSection.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import { Eyebrow, Lead } from "../primitives";
+import { Button } from "../primitives/Button";
+import { HoursTable } from "./HoursTable";
+import { MapEmbed, type MapEmbedSite } from "./MapEmbed";
+import type { SiteConfig } from "./siteConfig";
+
+/** The keys of the site config the section reads; a whole `SiteConfig` passes as it is. */
+export type LocationSectionSite = MapEmbedSite &
+	Pick<SiteConfig, "serviceAreas" | "hours" | "phone">;
+
+export interface LocationSectionProps {
+	site: LocationSectionSite;
+	eyebrow?: string;
+	title: ReactNode;
+	lead?: ReactNode;
+}
+
+/** Joins service areas into readable prose: "A, B, and C". */
+function areasSentence(areas: string[]): string {
+	if (areas.length <= 1) return areas[0] ?? "";
+	return `${areas.slice(0, -1).join(", ")}, and ${areas[areas.length - 1]}`;
+}
+
+/**
+ * Local SEO section: NAP copy, service areas, hours, directions, and the
+ * map embed. Identical on every page that uses it — the service areas
+ * render as plain prose (crawlable text) from the site config.
+ */
+export function LocationSection({ site, eyebrow = "Find us", title, lead }: LocationSectionProps) {
+	return (
+		<section className="section location">
+			<div className="wrap location-grid">
+				<div>
+					<Eyebrow>{eyebrow}</Eyebrow>
+					<h2>{title}</h2>
+					{lead && <Lead>{lead}</Lead>}
+					{site.serviceAreas.length > 0 && (
+						<p className="loc-areas">Proudly serving {areasSentence(site.serviceAreas)}.</p>
+					)}
+
+					<div className="loc-block">
+						<h4>Hours</h4>
+						<HoursTable hours={site.hours} />
+					</div>
+
+					<div className="loc-actions">
+						{site.mapLinkUrl && (
+							<Button variant="dark" href={site.mapLinkUrl} newTab arrow>
+								Get Directions
+							</Button>
+						)}
+						{site.phone && (
+							<Button variant="ghost" href={`tel:${site.phone.e164}`}>
+								{site.phone.display}
+							</Button>
+						)}
+					</div>
+				</div>
+				<div>
+					<MapEmbed site={site} />
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/sections/Locations.tsx

@@ -0,0 +1,71 @@
+import { Navigation, Phone } from "lucide-react";
+import type { ReactNode } from "react";
+import { Eyebrow, Lead } from "../primitives";
+import { MapEmbed, type MapEmbedSite } from "./MapEmbed";
+
+export interface LocationEntry {
+	name: string;
+	address: string;
+	/** Hours lines, already formatted, e.g. "Mon to Sat · 5am to 3pm". */
+	hours: string[];
+	phoneDisplay: string;
+	phoneE164: string;
+	mapLink: string;
+	/** Optional one-line note, e.g. "The original, since 1979". */
+	note?: string;
+}
+
+export interface LocationsProps {
+	/** Drives the static map (the primary/flagship location); a whole `SiteConfig` passes as it is. */
+	site: MapEmbedSite;
+	eyebrow?: string;
+	title: ReactNode;
+	lead?: ReactNode;
+	locations: LocationEntry[];
+}
+
+/**
+ * Multi-location block: the flagship's static map beside a grid of location
+ * cards (address, hours, call, directions). Reusable for any business that
+ * runs more than one address.
+ */
+export function Locations({ site, eyebrow = "Find us", title, lead, locations }: LocationsProps) {
+	return (
+		<section className="section locs">
+			<div className="wrap">
+				<Eyebrow>{eyebrow}</Eyebrow>
+				<h2>{title}</h2>
+				{lead && <Lead style={{ maxWidth: "58ch" }}>{lead}</Lead>}
+				<div className="locs-layout">
+					<div className="locs-map">
+						<MapEmbed site={site} />
+					</div>
+					<div className="locs-cards">
+						{locations.map((loc) => (
+							<div className="loc-card" key={loc.name}>
+								<h3>{loc.name}</h3>
+								{loc.note && <p className="loc-note">{loc.note}</p>}
+								<p className="loc-addr">{loc.address}</p>
+								<div className="loc-hours">
+									{loc.hours.map((line) => (
+										<span key={line}>{line}</span>
+									))}
+								</div>
+								<div className="loc-links">
+									<a href={`tel:${loc.phoneE164}`}>
+										<Phone size={14} aria-hidden />
+										{loc.phoneDisplay}
+									</a>
+									<a href={loc.mapLink} target="_blank" rel="noopener">
+										<Navigation size={14} aria-hidden />
+										Directions
+									</a>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/sections/LogoMarquee.tsx

@@ -0,0 +1,27 @@
+import { Chip } from "../primitives/Chip";
+
+export interface LogoMarqueeProps {
+	/** Items scrolled across the band (credentials, client names, press). */
+	items: string[];
+	ariaLabel?: string;
+}
+
+/** Dark band with an infinitely scrolling row of chips. */
+export function LogoMarquee({ items, ariaLabel = "Credentials" }: LogoMarqueeProps) {
+	// The track is duplicated so the -50% translate loops seamlessly.
+	const track = [...items, ...items];
+	return (
+		<section className="creds" aria-label={ariaLabel}>
+			<div className="marquee">
+				<div className="marquee-track">
+					{track.map((item, i) => (
+						// biome-ignore lint/suspicious/noArrayIndexKey: intentional duplicates for the loop
+						<Chip key={`${item}-${i}`} dot onDark>
+							{item}
+						</Chip>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/sections/MapEmbed.tsx

@@ -0,0 +1,75 @@
+import { MapPin, Navigation } from "lucide-react";
+import { useState } from "react";
+import { useWithBase } from "../routing/BasePathProvider";
+import type { SiteConfig } from "./siteConfig";
+
+/** The keys of the site config the map reads; a whole `SiteConfig` passes as it is. */
+export type MapEmbedSite = Pick<
+	SiteConfig,
+	"name" | "address" | "mapImage" | "mapLinkUrl" | "mapEmbedUrl"
+>;
+
+export interface MapEmbedProps {
+	site: MapEmbedSite;
+}
+
+/**
+ * The location map. Preferred form is a static screenshot (`site.mapImage`):
+ * one image request, no third-party chain, and a real map on first paint,
+ * linking straight to directions. Falls back to a click-to-load facade over
+ * the live Google embed when no static image is provided (the embed's utility
+ * chain weighs ~450 KiB, so it never loads on its own).
+ */
+export function MapEmbed({ site }: MapEmbedProps) {
+	const withBase = useWithBase();
+	const [loaded, setLoaded] = useState(false);
+
+	const address = `${site.address.street}, ${site.address.locality} ${site.address.region} ${site.address.postalCode}`;
+
+	if (site.mapImage) {
+		return (
+			<a
+				className="map-frame map-static"
+				href={site.mapLinkUrl ?? "#"}
+				{...(site.mapLinkUrl ? { target: "_blank", rel: "noopener" } : {})}
+				aria-label={`Get directions to ${site.name}, ${address}`}
+			>
+				<img src={withBase(site.mapImage)} alt={`Map to ${site.name}, ${address}`} loading="lazy" />
+				<span className="map-directions">
+					<Navigation size={15} aria-hidden />
+					Get Directions
+				</span>
+			</a>
+		);
+	}
+
+	if (!site.mapEmbedUrl) return null;
+
+	if (!loaded) {
+		return (
+			<div className="map-frame">
+				<button
+					type="button"
+					className="map-facade"
+					onClick={() => setLoaded(true)}
+					aria-label={`Load the map to ${site.name}, ${address}`}
+				>
+					<MapPin size={28} aria-hidden />
+					<span className="map-facade-address">{address}</span>
+					<span className="map-facade-hint">Tap to load the map</span>
+				</button>
+			</div>
+		);
+	}
+
+	return (
+		<div className="map-frame">
+			<iframe
+				title={`Map to ${site.name}, ${address}`}
+				src={site.mapEmbedUrl}
+				loading="lazy"
+				referrerPolicy="no-referrer-when-downgrade"
+			/>
+		</div>
+	);
+}

package/src/sections/MediaBand.tsx

@@ -0,0 +1,20 @@
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface MediaBandProps {
+	image: { src: string; alt: string };
+	/**
+	 * CSS aspect-ratio for the band (viewport-width : height), e.g. "8/3" for
+	 * a wide strip. The image covers the band and crops from center.
+	 */
+	aspectRatio?: string;
+}
+
+/** Full-bleed image band: edge to edge, no frame, no radius. */
+export function MediaBand({ image, aspectRatio = "8/3" }: MediaBandProps) {
+	const withBase = useWithBase();
+	return (
+		<div className="media-band" style={{ aspectRatio }}>
+			<img src={withBase(image.src)} alt={image.alt} loading="lazy" />
+		</div>
+	);
+}

package/src/sections/MenuList.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+
+/**
+ * A priced menu group: uppercase heading over dotted rows of name, optional
+ * note, and price, with an optional fine-print foot line. Composes into a
+ * page column; pair with Menu structured data in the route's head().
+ * Styles live in menu-list.css beside it, with the `.menu-stack` and
+ * `.menu-cols` layouts a page stacks its groups in.
+ */
+
+export interface MenuListItem {
+	name: string;
+	/** Modifier or description line under the name. */
+	note?: string;
+	/** Rendered as text so ranges ("Small 5 / Large 6") stay expressible. */
+	price: string;
+}
+
+export interface MenuListProps {
+	heading: string;
+	items: MenuListItem[];
+	/** Fine print after the rows, e.g. "All sandwiches available as a salad." */
+	foot?: ReactNode;
+}
+
+export function MenuList({ heading, items, foot }: MenuListProps) {
+	return (
+		<div className="menu-list">
+			<h3>{heading}</h3>
+			<ul>
+				{items.map((item) => (
+					<li key={item.name}>
+						<span className="ml-item">
+							<span className="ml-name">{item.name}</span>
+							{item.note && <span className="ml-note">{item.note}</span>}
+						</span>
+						<span className="ml-price">{item.price}</span>
+					</li>
+				))}
+			</ul>
+			{foot && <p className="ml-foot">{foot}</p>}
+		</div>
+	);
+}

package/src/sections/PageHero.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { Eyebrow, Lead } from "../primitives";
+
+export interface PageHeroProps {
+	eyebrow?: string;
+	title: ReactNode;
+	lead?: ReactNode;
+	center?: boolean;
+	/** Extra content under the lead (e.g. jump-link chips). */
+	children?: ReactNode;
+}
+
+/** Interior page opener on the alternate surface band. */
+export function PageHero({ eyebrow, title, lead, center = false, children }: PageHeroProps) {
+	return (
+		<section className={["page-hero", center && "center"].filter(Boolean).join(" ")}>
+			<div className="wrap">
+				{eyebrow && <Eyebrow center={center}>{eyebrow}</Eyebrow>}
+				<h1>{title}</h1>
+				{lead && <Lead style={center ? { marginInline: "auto" } : undefined}>{lead}</Lead>}
+				{children}
+			</div>
+		</section>
+	);
+}

package/src/sections/PressQuotes.tsx

@@ -0,0 +1,51 @@
+export interface PressItem {
+	/** The quote or award title, e.g. "Best Coffeehouse for Food". */
+	quote: string;
+	/** Publication name, e.g. "Westword". */
+	source: string;
+	year: string | number;
+	/** Link to the article; rows without one render unlinked. */
+	href?: string;
+}
+
+export interface PressQuotesProps {
+	items: PressItem[];
+	/** Display order by year; newest first unless told otherwise. */
+	order?: "newest" | "oldest";
+	className?: string;
+}
+
+/** Sort press items by year; exported for tests. */
+export function sortPress(items: PressItem[], order: "newest" | "oldest"): PressItem[] {
+	const dir = order === "newest" ? -1 : 1;
+	return [...items].sort((a, b) => dir * (Number(a.year) - Number(b.year)));
+}
+
+/** Rule separated rows of press quotes and awards, each citing its publication and year and linking to the article. */
+export function PressQuotes({ items, order = "newest", className }: PressQuotesProps) {
+	return (
+		<ul className={["press-quotes", className].filter(Boolean).join(" ")}>
+			{sortPress(items, order).map((item) => {
+				const body = (
+					<>
+						<span className="pq-quote">{item.quote}</span>
+						<span className="pq-src">
+							{item.source} · {item.year}
+						</span>
+					</>
+				);
+				return (
+					<li key={item.source + item.year + item.quote}>
+						{item.href ? (
+							<a className="pq-row" href={item.href} target="_blank" rel="noopener noreferrer">
+								{body}
+							</a>
+						) : (
+							<div className="pq-row">{body}</div>
+						)}
+					</li>
+				);
+			})}
+		</ul>
+	);
+}

package/src/sections/PricingBand.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { Eyebrow } from "../primitives";
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface PricingBandProps {
+	eyebrow?: string;
+	title: ReactNode;
+	lead?: ReactNode;
+	price: string;
+	/** Unit line under the price, e.g. "/ 60 minutes". */
+	unit: string;
+	/** Detail link under the price, e.g. to the pricing page. */
+	detail?: { label: string; href: string };
+}
+
+/**
+ * Brand-colored pricing band with an inline price card. Informational by
+ * design — the page's booking action belongs to the closing CTASection,
+ * so pages never pitch the primary CTA twice.
+ */
+export function PricingBand({ eyebrow, title, lead, price, unit, detail }: PricingBandProps) {
+	const withBase = useWithBase();
+	return (
+		<section className="price-band">
+			<div className="wrap price-inner">
+				<div>
+					{eyebrow && <Eyebrow onDark>{eyebrow}</Eyebrow>}
+					<h2>{title}</h2>
+					{lead && <p className="lead price-lead">{lead}</p>}
+				</div>
+				<div className="price-card">
+					<span className="price-fig">{price}</span>
+					<span className="price-unit">{unit}</span>
+					{detail && (
+						<a className="price-detail" href={withBase(detail.href)}>
+							{detail.label} →
+						</a>
+					)}
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/sections/PricingCard.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import { Button } from "../primitives/Button";
+import { TickList } from "../primitives/TickList";
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface PricingCardProps {
+	/** Small mono line above the price, e.g. "Every session · every service". */
+	ribbon?: string;
+	price: string;
+	/** Line under the price, e.g. "for a full 60 minutes". */
+	per: string;
+	ticks?: ReactNode[];
+	cta: { label: string; href: string; newTab?: boolean };
+	secondary?: { label: string; href: string };
+}
+
+/** Standalone detailed pricing card (the pricing page centerpiece). */
+export function PricingCard({ ribbon, price, per, ticks, cta, secondary }: PricingCardProps) {
+	const withBase = useWithBase();
+	return (
+		<div className="cost-card">
+			{ribbon && <span className="ribbon">{ribbon}</span>}
+			<div className="big">{price}</div>
+			<div className="per">{per}</div>
+			{ticks && ticks.length > 0 && <TickList items={ticks} />}
+			<Button href={cta.href} newTab={cta.newTab} size="lg" arrow style={{ width: "100%" }}>
+				{cta.label}
+			</Button>
+			{secondary && (
+				<a className="cost-secondary" href={withBase(secondary.href)}>
+					{secondary.label} →
+				</a>
+			)}
+		</div>
+	);
+}

package/src/sections/ProcessSteps.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import { Eyebrow } from "../primitives";
+import { ImageFrame } from "../primitives/ImageFrame";
+
+export interface ProcessStep {
+	title: string;
+	description: string;
+}
+
+export interface ProcessStepsProps {
+	eyebrow?: string;
+	title: ReactNode;
+	steps: ProcessStep[];
+	image?: { src: string; alt: string };
+	/** Placeholder label rendered in the media frame until a real image exists. */
+	placeholder?: string;
+}
+
+/** Dark band with numbered steps and supporting media. */
+export function ProcessSteps({ eyebrow, title, steps, image, placeholder }: ProcessStepsProps) {
+	return (
+		<section className="section process">
+			<div className="wrap process-grid">
+				<div>
+					{eyebrow && <Eyebrow onDark>{eyebrow}</Eyebrow>}
+					<h2>{title}</h2>
+					<ol className="steps">
+						{steps.map((step, i) => (
+							<li key={step.title}>
+								<span className="step-n">{i + 1}</span>
+								<div>
+									<h4>{step.title}</h4>
+									<p>{step.description}</p>
+								</div>
+							</li>
+						))}
+					</ol>
+				</div>
+				<div className="process-media">
+					<ImageFrame src={image?.src} alt={image?.alt} placeholder={placeholder} />
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/sections/ProfileCards.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import { SectionHeading } from "../primitives";
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface ProfileItem {
+	name: string;
+	/** One or two sentence bio; keep it shorter than a FeatureDetail lead. */
+	blurb: ReactNode;
+	/** Example of their work or a portrait. */
+	image?: { src: string; alt: string };
+	/** Placeholder label rendered until a real image exists. */
+	placeholder?: string;
+	/** Where the card links (e.g. the person's section on a roster page). */
+	href?: string;
+	linkLabel?: string;
+	/** Small mono line under the name (e.g. an Instagram handle). */
+	meta?: string;
+}
+
+export interface ProfileCardsProps {
+	id?: string;
+	eyebrow?: string;
+	title: ReactNode;
+	lead?: ReactNode;
+	items: ProfileItem[];
+}
+
+/**
+ * Equal-weight horizontal profile cards: media beside a short bio, no
+ * numbering. For rosters and teams where every member carries the same
+ * weight (contrast FeatureGrid, whose numbered cards imply an ordering).
+ */
+export function ProfileCards({ id, eyebrow, title, lead, items }: ProfileCardsProps) {
+	const withBase = useWithBase();
+	return (
+		<section className="section" id={id}>
+			<div className="wrap">
+				<SectionHeading eyebrow={eyebrow} title={title} lead={lead} />
+				<ul className="profile-cards">
+					{items.map((item) => {
+						const media = item.image ? (
+							<img src={withBase(item.image.src)} alt={item.image.alt} loading="lazy" />
+						) : (
+							<span className="profile-placeholder">{item.placeholder ?? "Photo"}</span>
+						);
+						const body = (
+							<>
+								<div className="profile-media">{media}</div>
+								<div className="profile-body">
+									<h3>{item.name}</h3>
+									{item.meta && <span className="profile-meta">{item.meta}</span>}
+									<p>{item.blurb}</p>
+									{item.href && <span className="profile-link">{item.linkLabel ?? "More"} →</span>}
+								</div>
+							</>
+						);
+						return (
+							<li key={item.name}>
+								{item.href ? (
+									<a className="profile-card" href={withBase(item.href)}>
+										{body}
+									</a>
+								) : (
+									<div className="profile-card">{body}</div>
+								)}
+							</li>
+						);
+					})}
+				</ul>
+			</div>
+		</section>
+	);
+}