@atelic-action/ui 0.17.2 → 1.1.0

package/src/sections/FeatureDetail.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import { Eyebrow, Lead } from "../primitives";
+import { Chip } from "../primitives/Chip";
+import { ImageFrame } from "../primitives/ImageFrame";
+import { TickList } from "../primitives/TickList";
+
+export interface FeatureDetailProps {
+	/** Anchor id for jump links, e.g. "dry-needling". */
+	id?: string;
+	/** Optional mono index label, e.g. "01". Rendered above the eyebrow; omit for no number. */
+	num?: string;
+	eyebrow?: string;
+	title: ReactNode;
+	tags?: string[];
+	lead?: ReactNode;
+	ticks?: ReactNode[];
+	image?: { src: string; alt: string };
+	/** Placeholder label rendered in the media frame until a real image exists. */
+	placeholder?: string;
+	/** Media on the left on wide screens (alternating rows). */
+	flip?: boolean;
+}
+
+/** Alternating copy-and-media feature row (the services page pattern). */
+export function FeatureDetail({
+	id,
+	num,
+	eyebrow,
+	title,
+	tags,
+	lead,
+	ticks,
+	image,
+	placeholder,
+	flip = false,
+}: FeatureDetailProps) {
+	return (
+		<article className={["feature-detail", flip && "flip"].filter(Boolean).join(" ")} id={id}>
+			<div>
+				{num && <span className="feature-num">{num}</span>}
+				{eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
+				<h2>{title}</h2>
+				{tags && tags.length > 0 && (
+					<div className="chip-row tag-row">
+						{tags.map((tag) => (
+							<Chip key={tag} dot>
+								{tag}
+							</Chip>
+						))}
+					</div>
+				)}
+				{lead && <Lead>{lead}</Lead>}
+				{ticks && ticks.length > 0 && <TickList items={ticks} className="detail-ticks" />}
+			</div>
+			<div className="feature-detail-media">
+				<ImageFrame src={image?.src} alt={image?.alt} placeholder={placeholder} aspectRatio="4/3" />
+			</div>
+		</article>
+	);
+}

package/src/sections/FeatureGrid.tsx

@@ -0,0 +1,83 @@
+import type { CSSProperties, ReactNode } from "react";
+import { SectionHeading } from "../primitives";
+import { useWithBase } from "../routing/BasePathProvider";
+
+interface FeatureCardBase {
+	/** Small mono index label, e.g. "01". */
+	num?: string;
+	title: string;
+}
+
+/**
+ * A card is either a link or a card that contains one, never both. The linked
+ * variant wraps the whole card in an anchor, and an anchor inside an anchor is
+ * invalid markup that browsers silently unnest, so a linked card's description
+ * stays plain text. The unlinked variant takes a node, which is how a word
+ * inside a card links to its definition.
+ *
+ * That node is inline content only: the description renders inside the card's
+ * `<p>`, so a block element (`p`, `div`, `ul`) nested there is invalid markup.
+ * TypeScript has no phrasing content type to say so, which leaves it a rule
+ * rather than a constraint.
+ */
+export type FeatureCard =
+	| (FeatureCardBase & { description: ReactNode; href?: never; linkLabel?: never })
+	| (FeatureCardBase & { description: string; href: string; linkLabel?: string });
+
+export interface FeatureGridProps {
+	eyebrow?: string;
+	/** Deprecated no-op: the eyebrow's trailing fade is now its only rendering. */
+	eyebrowRun?: boolean;
+	title: ReactNode;
+	items: FeatureCard[];
+	/** Cards per row at desktop width (default 4). */
+	columns?: 2 | 3 | 4;
+	surface?: "default" | "alt";
+	id?: string;
+}
+
+/** Numbered feature/service card grid with hover lift. */
+export function FeatureGrid({
+	eyebrow,
+	title,
+	items,
+	columns = 4,
+	surface = "alt",
+	id,
+}: FeatureGridProps) {
+	const withBase = useWithBase();
+	const sectionClasses = ["section", surface === "alt" && "surface-alt"].filter(Boolean).join(" ");
+	const gridStyle = { "--fg-cols": columns } as CSSProperties;
+	return (
+		<section className={sectionClasses} id={id}>
+			<div className="wrap">
+				<SectionHeading eyebrow={eyebrow} title={title} />
+				<div className="feature-grid" style={gridStyle}>
+					{items.map((item) => {
+						const inner = (
+							<>
+								{item.num && <span className="feature-num">{item.num}</span>}
+								<h3>{item.title}</h3>
+								<p>{item.description}</p>
+								{item.href && item.linkLabel && (
+									<span className="feature-link">
+										{item.linkLabel} <span className="arrow">→</span>
+									</span>
+								)}
+							</>
+						);
+						return item.href ? (
+							<a key={item.title} className="feature-card" href={withBase(item.href)}>
+								{inner}
+							</a>
+						) : (
+							<div key={item.title} className="feature-card">
+								{inner}
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/sections/Gallery.tsx

@@ -0,0 +1,84 @@
+import type { ReactNode } from "react";
+import { Eyebrow, Lead } from "../primitives";
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface GalleryPhoto {
+	src?: string;
+	/** Alt text: describe the work in the frame, never the brand. */
+	alt?: string;
+	/** Placeholder shot brief rendered when no src exists yet. */
+	placeholder?: string;
+	/** Short caption rendered under the photo. Keep it to one honest line. */
+	caption?: string;
+}
+
+export interface GalleryProps {
+	id?: string;
+	eyebrow?: string;
+	title: ReactNode;
+	lead?: ReactNode;
+	photos: GalleryPhoto[];
+	/** Tiles per row at desktop width (default 3). */
+	columns?: 2 | 3;
+	surface?: "default" | "alt";
+	/** Small note under the grid, e.g. photo provenance. */
+	footnote?: ReactNode;
+}
+
+/**
+ * A captioned photo grid for a business's own work. Built for trade and
+ * service clients whose proof is the job itself: every tile is a real
+ * photograph with a caption that says what it is, never a stock frame.
+ *
+ * Tiles crop to a fixed aspect so a mixed bag of phone photos still reads
+ * as one wall. Photos without a `src` render their shot brief as a labeled
+ * placeholder, so the wall can be composed before the photography exists.
+ */
+export function Gallery({
+	id,
+	eyebrow,
+	title,
+	lead,
+	photos,
+	columns = 3,
+	surface = "default",
+	footnote,
+}: GalleryProps) {
+	const withBase = useWithBase();
+	return (
+		<section
+			id={id}
+			className={["section gallery-section", surface === "alt" && "surface-alt"]
+				.filter(Boolean)
+				.join(" ")}
+		>
+			<div className="wrap">
+				{eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
+				<h2>{title}</h2>
+				{lead && <Lead style={{ maxWidth: "60ch" }}>{lead}</Lead>}
+				<ul className={`gallery-grid cols-${columns}`}>
+					{photos.map((photo) => (
+						<li className="gallery-item" key={photo.src ?? photo.placeholder ?? photo.caption}>
+							<figure>
+								{photo.src ? (
+									<div className="gallery-frame">
+										<img
+											src={withBase(photo.src)}
+											alt={photo.alt ?? ""}
+											loading="lazy"
+											decoding="async"
+										/>
+									</div>
+								) : (
+									<div className="gallery-frame ph">{photo.placeholder ?? "Photo"}</div>
+								)}
+								{photo.caption && <figcaption>{photo.caption}</figcaption>}
+							</figure>
+						</li>
+					))}
+				</ul>
+				{footnote && <p className="muted gallery-footnote">{footnote}</p>}
+			</div>
+		</section>
+	);
+}

package/src/sections/Hero.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+import { Eyebrow } from "../primitives";
+import { Button, type ButtonProps } from "../primitives/Button";
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface HeroCTA {
+	label: string;
+	href: string;
+	newTab?: boolean;
+}
+
+export interface HeroTrustItem {
+	value: string;
+	label: string;
+}
+
+export interface HeroProps {
+	eyebrow?: string;
+	/** Headline; use <em className="serif"> spans for the serif accent. */
+	title: ReactNode;
+	subtitle?: ReactNode;
+	/** Full-bleed hero image; omit to render the token-gradient fallback. */
+	image?: {
+		src: string;
+		alt: string;
+		/**
+		 * CSS object-position anchoring the photo's subject, e.g. "27% 35%".
+		 * Narrow viewports crop the sides of a cover-fit hero; without an
+		 * anchor the default center crop can push the subject out of frame.
+		 */
+		position?: string;
+	};
+	primaryCta?: HeroCTA;
+	secondaryCta?: HeroCTA;
+	/** Trust indicators rendered under the CTAs. */
+	trust?: HeroTrustItem[];
+	/** Anchor target for the scroll-down affordance, e.g. "#pain". */
+	scrollTarget?: string;
+}
+
+/** Full-bleed image hero with scrim, headline, CTA pair, and trust stats. */
+export function Hero({
+	eyebrow,
+	title,
+	subtitle,
+	image,
+	primaryCta,
+	secondaryCta,
+	trust,
+	scrollTarget,
+}: HeroProps) {
+	const withBase = useWithBase();
+	const ctaProps = (cta: HeroCTA, extra: Partial<ButtonProps>) => ({
+		href: cta.href,
+		newTab: cta.newTab,
+		...extra,
+	});
+
+	return (
+		<section className="hero">
+			<div className="hero-media">
+				{image ? (
+					<img
+						src={withBase(image.src)}
+						alt={image.alt}
+						fetchPriority="high"
+						{...(image.position ? { style: { objectPosition: image.position } } : {})}
+					/>
+				) : (
+					<div className="hero-media-fallback" />
+				)}
+				<div className="hero-scrim" />
+			</div>
+			<div className="wrap hero-content">
+				{eyebrow && <Eyebrow onDark>{eyebrow}</Eyebrow>}
+				<h1>{title}</h1>
+				{subtitle && <p className="hero-sub">{subtitle}</p>}
+				{(primaryCta || secondaryCta) && (
+					<div className="cta-row">
+						{primaryCta && (
+							<Button {...ctaProps(primaryCta, { size: "lg", arrow: true })}>
+								{primaryCta.label}
+							</Button>
+						)}
+						{secondaryCta && (
+							<Button {...ctaProps(secondaryCta, { variant: "ghost", size: "lg", onDark: true })}>
+								{secondaryCta.label}
+							</Button>
+						)}
+					</div>
+				)}
+				{trust && trust.length > 0 && (
+					<ul className="hero-trust">
+						{trust.map((item) => (
+							<li key={item.label}>
+								<strong>{item.value}</strong>
+								<span>{item.label}</span>
+							</li>
+						))}
+					</ul>
+				)}
+			</div>
+			{scrollTarget && (
+				<a className="hero-scroll" href={withBase(scrollTarget)} aria-label="Scroll down">
+					↓
+				</a>
+			)}
+		</section>
+	);
+}

package/src/sections/HoursTable.tsx

@@ -0,0 +1,23 @@
+import { formatHoursRange, isClosed } from "../lib/hours";
+import type { OpeningHours } from "./siteConfig";
+
+export interface HoursTableProps {
+	hours: OpeningHours[];
+}
+
+/** Day-by-day hours rows with dashed rules and mono times. */
+export function HoursTable({ hours }: HoursTableProps) {
+	return (
+		<div>
+			{hours.map((row) => (
+				<div
+					key={row.label}
+					className={["hours-row", isClosed(row) && "closed"].filter(Boolean).join(" ")}
+				>
+					<span className="day">{row.label}</span>
+					<span className="time">{formatHoursRange(row)}</span>
+				</div>
+			))}
+		</div>
+	);
+}

package/src/sections/JumpRail.tsx

@@ -0,0 +1,35 @@
+import { type PageStop, useScrollSpy } from "../hooks";
+
+/** One tab on the rail: an anchor already on the page. */
+export type JumpRailItem = PageStop;
+
+export interface JumpRailProps {
+	items: JumpRailItem[];
+	ariaLabel?: string;
+}
+
+/**
+ * Sticky in page navigation: a pill tab per section anchor, highlighted by
+ * scroll spy as its section enters the reading band. Extracted from the FAQ
+ * browser's category tabs so any long page can share it. The scroll spy
+ * comes from @atelic-action/ui, the same hook the header's page stops use.
+ */
+export function JumpRail({ items, ariaLabel = "Page sections" }: JumpRailProps) {
+	const activeId = useScrollSpy(items.map((item) => item.id));
+
+	return (
+		<nav className="jump-rail" aria-label={ariaLabel}>
+			<div className="wrap jump-rail-inner">
+				{items.map((item) => (
+					<a
+						key={item.id}
+						href={`#${item.id}`}
+						className={activeId === item.id ? "active" : undefined}
+					>
+						{item.label}
+					</a>
+				))}
+			</div>
+		</nav>
+	);
+}

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>
+	);
+}