@atelic-action/ui 0.17.2 → 1.1.0

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

package/src/sections/RevealSlider.tsx

@@ -0,0 +1,156 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import {
+	type CSSProperties,
+	type KeyboardEvent,
+	type PointerEvent,
+	useCallback,
+	useRef,
+	useState,
+} from "react";
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface RevealSlide {
+	/** The image. Omit it and pass `placeholder` until the real shot exists. */
+	src?: string;
+	alt?: string;
+	/**
+	 * Shot brief rendered as a labeled block when there is no `src` yet, e.g.
+	 * "Screenshot: the old home page on a phone". The two sides render in
+	 * different tones, so dragging still moves something visible.
+	 */
+	placeholder?: string;
+	/** Corner label, e.g. "Today" or "The rebuild". */
+	label: string;
+}
+
+export interface RevealSliderProps {
+	/** The current-state image, revealed on the left. */
+	before: RevealSlide;
+	/** The rebuilt-state image, the base layer on the right. */
+	after: RevealSlide;
+	/** Starting divider position, 0-100. Default 50. */
+	startAt?: number;
+	/** Frame aspect ratio; both images should match it. Default "16/10". */
+	aspectRatio?: string;
+	/**
+	 * Accessible name for the drag handle. Defaults to a neutral before and
+	 * after, because what the two states are is the page's business rather
+	 * than the component's. Name them when the page can be specific.
+	 */
+	ariaLabel?: string;
+}
+
+/** One side of the frame: the photograph, or its shot brief until one exists. */
+function Layer({
+	slide,
+	side,
+	style,
+}: {
+	slide: RevealSlide;
+	side: "before" | "after";
+	style?: CSSProperties;
+}) {
+	const withBase = useWithBase();
+	const base = ["rslider-layer", side === "before" && "rslider-before"].filter(Boolean).join(" ");
+	if (!slide.src) {
+		return (
+			<div className={`${base} rslider-ph is-${side}`} style={style}>
+				<span>{slide.placeholder ?? slide.label}</span>
+			</div>
+		);
+	}
+	return (
+		<img
+			className={`${base} rslider-img`}
+			src={withBase(slide.src)}
+			alt={slide.alt ?? ""}
+			draggable={false}
+			style={style}
+		/>
+	);
+}
+
+/**
+ * Drag-to-compare before/after slider. The rebuilt image is the base layer;
+ * the current image is masked with clip-path so dragging never distorts either
+ * one. SSR-safe: prerenders at `startAt`, then hydrates the pointer + keyboard
+ * handles. Reusable across any before/after reveal.
+ *
+ * A side with no `src` renders its shot brief instead, so a case study or a
+ * project page can be composed before the photography exists.
+ */
+export function RevealSlider({
+	before,
+	after,
+	startAt = 50,
+	aspectRatio = "16/10",
+	ariaLabel = "Drag to compare before and after",
+}: RevealSliderProps) {
+	const [pos, setPos] = useState(startAt);
+	const frameRef = useRef<HTMLDivElement>(null);
+	const dragging = useRef(false);
+
+	const setFromClientX = useCallback((clientX: number) => {
+		const el = frameRef.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		const next = ((clientX - rect.left) / rect.width) * 100;
+		setPos(Math.max(0, Math.min(100, next)));
+	}, []);
+
+	const onPointerDown = (e: PointerEvent<HTMLButtonElement>) => {
+		dragging.current = true;
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+		setFromClientX(e.clientX);
+	};
+	const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
+		if (dragging.current) setFromClientX(e.clientX);
+	};
+	const endDrag = () => {
+		dragging.current = false;
+	};
+	const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+		if (e.key === "ArrowLeft") {
+			setPos((p) => Math.max(0, p - 3));
+			e.preventDefault();
+		} else if (e.key === "ArrowRight") {
+			setPos((p) => Math.min(100, p + 3));
+			e.preventDefault();
+		}
+	};
+
+	return (
+		<div
+			className="rslider"
+			style={{ aspectRatio }}
+			ref={frameRef}
+			onPointerMove={onPointerMove}
+			onPointerUp={endDrag}
+			onPointerLeave={endDrag}
+			onPointerCancel={endDrag}
+		>
+			<Layer slide={after} side="after" />
+			<Layer slide={before} side="before" style={{ clipPath: `inset(0 ${100 - pos}% 0 0)` }} />
+			<span className="rslider-label rslider-label-before">{before.label}</span>
+			<span className="rslider-label rslider-label-after">{after.label}</span>
+			<div className="rslider-line" style={{ left: `${pos}%` }} aria-hidden />
+			<button
+				type="button"
+				className="rslider-handle"
+				style={{ left: `${pos}%` }}
+				role="slider"
+				aria-label={ariaLabel}
+				aria-valuemin={0}
+				aria-valuemax={100}
+				aria-valuenow={Math.round(pos)}
+				onPointerDown={onPointerDown}
+				onKeyDown={onKeyDown}
+			>
+				<span className="rslider-grip">
+					<ChevronLeft size={16} aria-hidden />
+					<ChevronRight size={16} aria-hidden />
+				</span>
+			</button>
+		</div>
+	);
+}