@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/blocks/site/cta-booking.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { formatMessage } from "../../lib/message-format.js";
+import { formatTime } from "./shared/opening-hours.js";
+const DAYS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+const defaultTimes = () => Array.from({ length: 21 }, (_, i) => `${String(12 + Math.floor(i / 2)).padStart(2, "0")}:${i % 2 ? "30" : "00"}`);
+/** Today as `YYYY-MM-DD` in the business's time zone (never toISOString). */
+export function todayIn(timeZone, now = new Date()) {
+    const parts = new Intl.DateTimeFormat("en-CA", { timeZone, year: "numeric", month: "2-digit", day: "2-digit" }).formatToParts(now);
+    const get = (t) => parts.find((p) => p.type === t)?.value ?? "";
+    return `${get("year")}-${get("month")}-${get("day")}`;
+}
+const weekdayOf = (ymd) => {
+    const [y, m, d] = ymd.split("-").map(Number);
+    return DAYS[new Date(Date.UTC(y, m - 1, d)).getUTCDay()];
+};
+/**
+ * Booking bar island of the CTA `booking` variant (~2 KB). Native date/select fields; on submit
+ * it builds a prefilled WhatsApp message (Intl-formatted date and time) or sends the fields to a
+ * booking URL. Without JS the form still posts to the same target.
+ */
+export function CtaBooking({ provider, target, fields, services, times, maxGuests = 8, closedDays, timeZone, locale, strings, fallbackMessage, className }) {
+    const uid = React.useId();
+    const [min, setMin] = React.useState(undefined);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => setMin(todayIn(timeZone)), [timeZone]);
+    const timeList = times ?? defaultTimes();
+    const waUrl = `https://wa.me/${target.replace(/\D/g, "")}`;
+    const dayName = (wd) => {
+        // 2026-11-01 is a Sunday: offset into the week for a localized plural weekday name.
+        const d = new Date(Date.UTC(2026, 10, 1 + DAYS.indexOf(wd)));
+        return new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" }).format(d);
+    };
+    const check = (ymd) => {
+        if (ymd && closedDays?.includes(weekdayOf(ymd))) {
+            setError(formatMessage(strings.closedOn, { day: dayName(weekdayOf(ymd)) }, locale));
+            return false;
+        }
+        setError(null);
+        return true;
+    };
+    const onSubmit = (e) => {
+        const data = new FormData(e.currentTarget);
+        const date = String(data.get("date") ?? "");
+        if (!check(date)) {
+            e.preventDefault();
+            return;
+        }
+        if (provider !== "whatsapp")
+            return; // native GET to the booking URL
+        e.preventDefault();
+        const [y, m, d] = date ? date.split("-").map(Number) : [];
+        const dateText = date ? new Intl.DateTimeFormat(locale, { weekday: "short", day: "numeric", month: "long", timeZone: "UTC" }).format(new Date(Date.UTC(y, m - 1, d))) : "—";
+        const time = String(data.get("time") ?? "");
+        // Same clock as the time list and the opening hours (12- or 24-hour by locale).
+        const timeText = time ? formatTime(time, locale) : "—";
+        const guests = Number(data.get("guests") ?? 2);
+        const service = String(data.get("service") ?? "");
+        const text = formatMessage(service ? strings.messageService : strings.message, { date: dateText, time: timeText, service, guests: formatMessage(strings.guestsCount, { count: guests }, locale) }, locale);
+        window.open(`${waUrl}?text=${encodeURIComponent(text)}`, "_blank", "noopener,noreferrer");
+    };
+    const cell = "vb-booking-cell flex min-w-0 flex-col gap-1 bg-scene px-4 py-2.5";
+    const label = "font-mono text-[0.6875rem] uppercase tracking-[0.08em] text-fg-subtle";
+    const control = "vb-booking-control w-full min-w-0 bg-transparent text-body text-fg outline-none";
+    const errId = `${uid}-err`;
+    return (_jsxs("form", { action: provider === "whatsapp" ? waUrl : target, method: "get", target: provider === "whatsapp" ? "_blank" : undefined, onSubmit: onSubmit, className: cn("vb-booking flex flex-col gap-2", className), children: [provider === "whatsapp" ? _jsx("input", { type: "hidden", name: "text", value: fallbackMessage }) : null, _jsxs("div", { className: "vb-booking-bar grid grid-cols-2 gap-px overflow-hidden rounded-ui border border-field-border bg-field-border @2xl:flex @2xl:items-stretch", children: [fields.includes("date") ? (_jsxs("div", { className: cn(cell, "@2xl:flex-1"), children: [_jsx("label", { htmlFor: `${uid}-date`, className: label, children: strings.date }), _jsx("input", { id: `${uid}-date`, name: "date", type: "date", required: true, min: min, "aria-invalid": error ? true : undefined, "aria-describedby": error ? errId : undefined, onChange: (e) => check(e.currentTarget.value), className: cn(control, "tabular") })] })) : null, fields.includes("time") ? (_jsxs("div", { className: cn(cell, "@2xl:w-36"), children: [_jsx("label", { htmlFor: `${uid}-time`, className: label, children: strings.time }), _jsx("select", { id: `${uid}-time`, name: "time", required: true, defaultValue: timeList.includes("19:30") ? "19:30" : timeList[0], className: cn(control, "tabular"), children: timeList.map((t) => (_jsx("option", { value: t, children: formatTime(t, locale) }, t))) })] })) : null, fields.includes("guests") ? (_jsxs("div", { className: cn(cell, "@2xl:w-36"), children: [_jsx("label", { htmlFor: `${uid}-guests`, className: label, children: strings.guests }), _jsx("select", { id: `${uid}-guests`, name: "guests", defaultValue: "2", className: cn(control, "tabular"), children: Array.from({ length: maxGuests }, (_, i) => i + 1).map((n) => (_jsx("option", { value: n, children: formatMessage(strings.guestsCount, { count: n }, locale) }, n))) })] })) : null, fields.includes("service") && services?.length ? (_jsxs("div", { className: cn(cell, "@2xl:flex-1"), children: [_jsx("label", { htmlFor: `${uid}-service`, className: label, children: strings.service }), _jsx("select", { id: `${uid}-service`, name: "service", className: control, children: services.map((s) => (_jsx("option", { value: s, children: s }, s))) })] })) : null, _jsx("div", { className: "col-span-2 flex bg-scene p-1.5 @2xl:col-span-1", children: _jsxs("button", { type: "submit", className: "vb-action-primary inline-flex h-full min-h-11 w-full items-center justify-center gap-2 rounded-[calc(var(--radius)-4px)] bg-accent px-5 text-[15px] font-semibold text-accent-fg transition-[filter] hover:brightness-[1.04] focus-ring", children: [strings.submit, provider === "whatsapp" ? _jsxs("span", { className: "sr-only", children: [" ", strings.opensWhatsApp] }) : null] }) })] }), _jsx("p", { id: errId, role: "alert", className: cn("text-small text-danger", !error && "sr-only"), children: error ?? "" })] }));
+}

package/dist/blocks/site/cta.d.ts

@@ -0,0 +1,74 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { RichDoc } from "../schema/rich-doc.js";
+import { type BookingField, type BookingWeekday } from "./cta-booking.js";
+import { type SiteBlockLabels, type SiteCta, type SiteImage } from "./_kit-1.js";
+export type CtaVariant = "band" | "split" | "minimal" | "newsletter" | "booking";
+/** `https://wa.me/<digits>?text=<encoded>` from an E.164 number. */
+export declare function waLink(e164: string, text?: string): string;
+export interface CtaBookingConfig {
+    /** whatsapp: prefilled message · url: GET the fields to a booking page · phone: a call button · embed: calendar facade. */
+    provider: "whatsapp" | "url" | "phone" | "embed";
+    /** E.164 for whatsapp / phone. */
+    whatsapp?: string;
+    phone?: string;
+    /** url: booking page; embed: Calendly (or other allowed) URL. */
+    url?: string;
+    fields?: BookingField[];
+    services?: string[];
+    times?: string[];
+    maxGuests?: number;
+    closedDays?: BookingWeekday[];
+    timeZone?: string;
+    /** "Hi, I'd like a table for {guests} on {date} at {time}." */
+    messageTemplate?: string;
+    /** embed: preview image shown before the calendar loads. */
+    preview?: SiteImage;
+}
+export interface CtaProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * band: a full-width accent band; big title at the start, actions at the end, phone line below.
+     * split: title + action on the start side, a cropped photo on the end side.
+     * minimal: no background; a very large centred title and one huge underlined text link.
+     * newsletter: title + text at the start, email field + button at the end, consent below.
+     * booking: a thin bar — date · time · guests/service — ending with "Ask for availability".
+     */
+    variant?: CtaVariant;
+    eyebrow?: React.ReactNode;
+    title: React.ReactNode;
+    lead?: React.ReactNode;
+    /** ≤ 2; one primary. In `minimal` only the first is used, as a large text link. */
+    actions?: SiteCta[];
+    /** split: the photo. */
+    media?: SiteImage;
+    /** band/split: mono contact line ("0216 000 00 00 · WhatsApp"). */
+    contact?: {
+        phone?: string;
+        whatsapp?: string;
+        whatsappText?: string;
+    };
+    newsletter?: {
+        /** Form action: a URL or a server action. */
+        action?: string | ((formData: FormData) => void | Promise<void>);
+        placeholder?: string;
+        buttonLabel?: string;
+        /** Consent text under the field (the app's legal copy). */
+        consent?: RichDoc | string;
+        /** Rendered result after a submit (the app passes it back). */
+        status?: "idle" | "success" | "error";
+        message?: React.ReactNode;
+    };
+    booking?: CtaBookingConfig;
+    /** Small print under the block ("No card needed. Cancel any time."). */
+    fineprint?: React.ReactNode;
+    labels?: SiteBlockLabels;
+}
+/**
+ * End-of-page call to action, newsletter signup or booking entry point. Server component;
+ * newsletter is a plain form (works without JS), booking a small island, embeds a facade.
+ *
+ * ```tsx
+ * <Cta title="Book the *long table*" actions={[{ link: { href: "/book", label: "Book a table" }, style: "primary" }]} contact={{ phone: "+902160000000" }} />
+ * ```
+ */
+export declare function Cta(props: CtaProps): React.JSX.Element;

package/dist/blocks/site/cta.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDays } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { Container, Section } from "../section.js";
+import { BlockHeading } from "../block-heading.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { RichText } from "../rich-text.js";
+import { CtaBooking } from "./cta-booking.js";
+import { EmbedFacade } from "./embed-facade.js";
+import { formatSitePhone } from "./navbar.js";
+import { ArrowEnd, CtaList, field, siteTemplate, siteText, useBlockIds } from "./_kit-1.js";
+import { Reveal } from "../../motion/reveal.js";
+/** `https://wa.me/<digits>?text=<encoded>` from an E.164 number. */
+export function waLink(e164, text) {
+    const base = `https://wa.me/${e164.replace(/\D/g, "")}`;
+    return text ? `${base}?text=${encodeURIComponent(text)}` : base;
+}
+/**
+ * End-of-page call to action, newsletter signup or booking entry point. Server component;
+ * newsletter is a plain form (works without JS), booking a small island, embeds a facade.
+ *
+ * ```tsx
+ * <Cta title="Book the *long table*" actions={[{ link: { href: "/book", label: "Book a table" }, style: "primary" }]} contact={{ phone: "+902160000000" }} />
+ * ```
+ */
+export function Cta(props) {
+    const { variant = "band", id, theme, anchor, className, editMode, components, labels } = props;
+    const { base, headingId } = useBlockIds(id, "cta");
+    const sectionTheme = variant === "band" ? { surface: "accent", ...theme } : theme;
+    const inner = { ...props, headingId };
+    return (_jsx(Section, { theme: sectionTheme, anchor: anchor, headingId: headingId, blockId: base, blockType: "cta", editMode: editMode, components: components, labels: labels, "data-variant": variant, className: cn("vb-cta", className), children: _jsx(Reveal, { disabled: editMode, children: variant === "split" ? _jsx(Split, { ...inner }) : variant === "minimal" ? _jsx(Minimal, { ...inner }) : variant === "newsletter" ? _jsx(Newsletter, { ...inner }) : variant === "booking" ? _jsx(Booking, { ...inner }) : _jsx(Band, { ...inner }) }) }));
+}
+function Heading({ p, size = "display-l", className }) {
+    return _jsx(BlockHeading, { id: p.headingId, level: p.headingLevel ?? 2, size: size, text: p.title, editMode: p.editMode, field: "props.title", labels: p.labels, locale: p.locale, className: className });
+}
+function Eyebrow({ p, className }) {
+    if (!p.eyebrow)
+        return null;
+    return (_jsx("p", { className: cn("font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", className), ...field(p.editMode, "eyebrow"), children: p.eyebrow }));
+}
+function Lead({ p, className }) {
+    if (!p.lead)
+        return null;
+    return (_jsx("p", { className: cn("vb-lead max-w-[52ch] text-lead text-fg-muted", className), ...field(p.editMode, "lead"), children: p.lead }));
+}
+function Fineprint({ p, className }) {
+    if (!p.fineprint)
+        return null;
+    return (_jsx("p", { className: cn("text-small text-fg-subtle", className), ...field(p.editMode, "fineprint"), children: p.fineprint }));
+}
+function ContactLine({ p, className }) {
+    const c = p.contact;
+    if (!c?.phone && !c?.whatsapp)
+        return null;
+    const t = siteText(p.labels, p.locale);
+    const linkCls = "rounded-[2px] underline decoration-current/30 underline-offset-4 transition-[text-decoration-color] hover:decoration-current focus-ring";
+    return (_jsxs("p", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-small tabular text-fg-muted", className), ...field(p.editMode, "contact"), children: [c.phone ? (_jsx("a", { href: `tel:${c.phone}`, "data-track": "call", className: linkCls, children: formatSitePhone(c.phone, p.locale) })) : null, c.phone && c.whatsapp ? _jsx("span", { "aria-hidden": true, children: "\u00B7" }) : null, c.whatsapp ? (_jsxs("a", { href: waLink(c.whatsapp, c.whatsappText), target: "_blank", rel: "noopener noreferrer", "data-track": "whatsapp", className: linkCls, children: ["WhatsApp", _jsxs("span", { className: "sr-only", children: [" ", t("opensWhatsApp")] })] })) : null] }));
+}
+const actionsOf = (p, extra) => _jsx(CtaList, { actions: p.actions, components: p.components, labels: p.labels, locale: p.locale, editMode: p.editMode, ...extra });
+/* band ------------------------------------------------------------------ */
+function Band(p) {
+    return (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-end", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-8", children: [_jsx(Eyebrow, { p: p }), _jsx(Heading, { p: p, className: "max-w-[16ch]" }), _jsx(Lead, { p: p })] }), _jsxs("div", { className: "flex flex-col gap-5 @4xl:col-span-4 @4xl:items-end", children: [actionsOf(p, { size: "xl", className: "@4xl:justify-end" }), _jsx(ContactLine, { p: p })] }), _jsx(Fineprint, { p: p, className: "@4xl:col-span-12" })] }));
+}
+/* split ----------------------------------------------------------------- */
+function Split(p) {
+    return (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-stretch", children: [_jsxs("div", { className: "flex flex-col justify-between gap-10 @4xl:col-span-6 @4xl:py-4", children: [_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(Eyebrow, { p: p }), _jsx(Heading, { p: p }), _jsx(Lead, { p: p })] }), _jsxs("div", { className: "flex flex-col gap-5", children: [actionsOf(p), _jsx(ContactLine, { p: p }), _jsx(Fineprint, { p: p })] })] }), p.media ? (_jsx("div", { className: "@4xl:col-span-5 @4xl:col-start-8", children: _jsx(BlockImage, { ...p.media, aspect: "4:5", sizes: "(min-width: 56rem) 40vw, 100vw", className: "h-full rounded-ui", components: p.components, labels: p.labels, editMode: p.editMode, field: "props.media" }) })) : null] }));
+}
+/* minimal --------------------------------------------------------------- */
+function Minimal(p) {
+    const a = p.actions?.[0];
+    return (_jsxs(Container, { className: "flex flex-col items-center gap-10 text-center", children: [_jsx(Eyebrow, { p: p }), _jsx(Heading, { p: p, className: "max-w-[18ch]" }), _jsx(Lead, { p: p, className: "mx-auto" }), a ? (_jsxs(BlockLink, { href: a.link.href, newTab: a.link.newTab, components: p.components, labels: p.labels, locale: p.locale, editMode: p.editMode, field: "props.actions.0", className: "vb-cta-biglink group/big inline-flex items-center gap-[0.35em] rounded-[2px] font-display text-display-m text-fg underline decoration-1 decoration-accent underline-offset-[0.18em] transition-[text-decoration-thickness] hover:decoration-2 focus-ring", children: [a.link.label, _jsx(ArrowEnd, { className: "size-[0.8em] group-hover/big:translate-x-1 rtl:group-hover/big:-translate-x-1" })] })) : null, _jsx(ContactLine, { p: p, className: "justify-center" }), _jsx(Fineprint, { p: p })] }));
+}
+/* newsletter ------------------------------------------------------------ */
+function Newsletter(p) {
+    const t = siteText(p.labels, p.locale);
+    const n = p.newsletter ?? {};
+    const { base } = useBlockIds(p.id, "newsletter");
+    const inputId = `${base}-email`;
+    const statusId = `${base}-status`;
+    const consentId = `${base}-consent`;
+    return (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-8 @4xl:grid-cols-12 @4xl:items-end", children: [_jsxs("div", { className: "flex flex-col gap-5 @4xl:col-span-6", children: [_jsx(Eyebrow, { p: p }), _jsx(Heading, { p: p, size: "display-m" }), _jsx(Lead, { p: p })] }), _jsxs("div", { className: "flex flex-col gap-3 @4xl:col-span-5 @4xl:col-start-8", children: [n.status === "success" ? (_jsx("p", { id: statusId, role: "status", className: "border-s-2 border-accent ps-4 text-body text-fg", children: n.message ?? t("subscribed") })) : (_jsxs("form", { action: n.action, method: "post", className: "flex flex-col gap-3", ...field(p.editMode, "newsletter"), children: [_jsx("label", { htmlFor: inputId, className: "sr-only", children: t("emailLabel") }), _jsxs("div", { className: "flex flex-col gap-2 @2xl:flex-row", children: [_jsx("input", { id: inputId, name: "email", type: "email", required: true, autoComplete: "email", inputMode: "email", placeholder: n.placeholder ?? t("emailPlaceholder"), "aria-invalid": n.status === "error" ? true : undefined, "aria-describedby": [n.status === "error" ? statusId : null, n.consent ? consentId : null].filter(Boolean).join(" ") || undefined, className: "h-12 min-w-0 flex-1 rounded-ui border border-field-border bg-field px-4 text-body text-fg outline-none transition-colors placeholder:text-fg-subtle hover:border-field-border-hover focus-visible:border-ring focus-ring" }), _jsx("input", { type: "text", name: "company_website", tabIndex: -1, autoComplete: "off", "aria-hidden": true, className: "sr-only" }), _jsx("button", { type: "submit", className: "vb-action-primary inline-flex h-12 shrink-0 items-center justify-center rounded-ui bg-accent px-6 text-[15px] font-semibold text-accent-fg transition-[filter] hover:brightness-[1.04] focus-ring", children: n.buttonLabel ?? t("subscribe") })] }), n.status === "error" ? (_jsx("p", { id: statusId, role: "alert", className: "text-small text-danger", children: n.message ?? t("subscribeError") })) : null, n.consent ? (_jsx("div", { id: consentId, children: _jsx(RichText, { doc: n.consent, size: "sm", components: p.components, labels: p.labels, locale: p.locale, className: "text-fg-subtle [&_a]:text-fg-muted" }) })) : null] })), _jsx(Fineprint, { p: p })] })] }));
+}
+/* booking --------------------------------------------------------------- */
+function Booking(p) {
+    const t = siteText(p.labels, p.locale);
+    const b = p.booking ?? { provider: "phone" };
+    const locale = p.locale ?? "en-US";
+    let control;
+    if (b.provider === "embed" && b.url) {
+        control = (_jsx("div", { className: "relative aspect-[16/10] overflow-hidden rounded-ui border border-line @4xl:aspect-[21/9]", children: _jsxs(EmbedFacade, { kind: "iframe", src: b.url, title: typeof p.title === "string" ? p.title.replace(/\*/g, "") : t("openCalendar"), buttonLabel: t("openCalendar"), children: [b.preview ? _jsx(BlockImage, { ...b.preview, decorative: true, aspect: "21:9", className: "absolute inset-0 h-full opacity-60", components: p.components }) : null, _jsxs("span", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-[color-mix(in_oklch,var(--scene)_55%,transparent)] text-center", children: [_jsxs("span", { className: "inline-flex h-12 items-center gap-2.5 rounded-ui bg-fg px-6 text-[15px] font-semibold text-scene", children: [_jsx(CalendarDays, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[18px]" }), t("openCalendar")] }), _jsx("span", { className: "text-small text-fg-muted", children: t("loadsCalendar", { provider: new URL(b.url).hostname.replace(/^www\./, "") }) })] })] }) }));
+    }
+    else if (b.provider === "phone") {
+        control = (_jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3", children: [b.phone ? (_jsx(BlockLink, { href: `tel:${b.phone}`, appearance: "primary", components: p.components, labels: p.labels, "data-track": "call", children: formatSitePhone(b.phone, locale) })) : null, actionsOf(p, { forceStyle: "link" })] }));
+    }
+    else {
+        const fields = b.fields?.length ? b.fields : ["date", "time", "guests"];
+        const target = b.provider === "whatsapp" ? (b.whatsapp ?? "") : (b.url ?? "");
+        control = (_jsx(CtaBooking, { provider: b.provider === "whatsapp" ? "whatsapp" : "url", target: target, fields: fields, services: b.services, times: b.times, maxGuests: b.maxGuests, closedDays: b.closedDays, timeZone: b.timeZone, locale: locale, fallbackMessage: t("bookingFallback"), strings: {
+                date: t("date"),
+                time: t("time"),
+                guests: t("guests"),
+                service: t("service"),
+                guestsCount: siteTemplate(p.labels, "guestsCount"),
+                submit: t("askAvailability"),
+                opensWhatsApp: t("opensWhatsApp"),
+                closedOn: siteTemplate(p.labels, "closedOn"),
+                message: b.messageTemplate ?? siteTemplate(p.labels, "bookingMessage"),
+                messageService: b.messageTemplate ?? siteTemplate(p.labels, "bookingMessageService"),
+            } }));
+    }
+    return (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-5 @4xl:grid-cols-12 @4xl:items-end", children: [_jsxs("div", { className: "flex flex-col gap-2 @4xl:col-span-4", children: [_jsx(Eyebrow, { p: p }), _jsx(Heading, { p: p, size: "h3" }), _jsx(Lead, { p: p, className: "text-body" })] }), _jsxs("div", { className: "flex flex-col gap-3 @4xl:col-span-8", children: [control, _jsx(Fineprint, { p: p })] })] }));
+}

package/dist/blocks/site/embed-facade.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface EmbedFacadeProps {
+    /** `iframe`: YouTube/Vimeo/Calendly URL loaded on click. `video`: an MP4 played inline. */
+    kind: "iframe" | "video";
+    src: string;
+    /** Accessible title of the iframe / video. */
+    title: string;
+    /** The static preview (server-rendered poster image + play affordance). */
+    children: React.ReactNode;
+    /** Accessible name of the button ("Play video: Our kitchen"). */
+    buttonLabel: string;
+    /** `allow` attribute for the iframe. */
+    allow?: string;
+    className?: string;
+}
+/**
+ * Facade: a static preview that becomes the real embed only after a click (no third-party
+ * cookies or scripts before the visitor asks, ~0.5 KB). Focus moves into the embed.
+ */
+export declare function EmbedFacade({ kind, src, title, children, buttonLabel, allow, className }: EmbedFacadeProps): React.JSX.Element;

package/dist/blocks/site/embed-facade.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { SrName } from "../../lib/sr-name.js";
+/**
+ * Facade: a static preview that becomes the real embed only after a click (no third-party
+ * cookies or scripts before the visitor asks, ~0.5 KB). Focus moves into the embed.
+ */
+export function EmbedFacade({ kind, src, title, children, buttonLabel, allow = "autoplay; fullscreen; picture-in-picture; encrypted-media", className }) {
+    const [active, setActive] = React.useState(false);
+    const target = React.useRef(null);
+    React.useEffect(() => {
+        if (active)
+            target.current?.focus();
+    }, [active]);
+    if (active) {
+        return kind === "video" ? (_jsx("video", { ref: target, src: src, title: title, controls: true, autoPlay: true, playsInline: true, className: cn("size-full bg-scene object-cover", className) })) : (_jsx("iframe", { ref: target, src: src, title: title, allow: allow, allowFullScreen: true, loading: "lazy", className: cn("size-full border-0 bg-scene", className) }));
+    }
+    return (_jsx("button", { type: "button", onClick: () => setActive(true), className: cn("vb-facade group/facade relative block size-full text-start focus-ring", className), children: _jsx(SrName, { name: buttonLabel, children: children }) }));
+}

package/dist/blocks/site/faq.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type RichDoc } from "../schema/rich-doc.js";
+import { type SiteBlockLabels, type SiteCta } from "./_kit-1.js";
+export type FaqVariant = "split" | "stacked" | "columns";
+export interface FaqItem {
+    q: string;
+    /** RichDoc or plain text (blank line = paragraph). */
+    a: RichDoc | string;
+    /** Anchor id; default `faq-<slug of the question>` (locale-aware). */
+    id?: string;
+}
+export interface FaqProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * split: sticky title + "Can't find your question?" link on the start side, accordion on the end side.
+     * stacked: title above, accordion full width at a 42rem measure.
+     * columns: no accordion — every answer open in two columns (short answers, maximally indexable).
+     */
+    variant?: FaqVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    items: FaqItem[];
+    /** Only one answer open at a time (native `<details name>`). Default true. */
+    exclusive?: boolean;
+    /** Open the first answer. Default false. */
+    openFirst?: boolean;
+    /** "Message us" link under the title. */
+    contact?: SiteCta;
+    /** Open the item matching `location.hash` (`#faq-parking`) — a 200-byte inline script. Default true. */
+    deepLink?: boolean;
+    labels?: SiteBlockLabels;
+}
+/** `FAQPage` JSON-LD for the items. */
+export declare function faqJsonLd(items: {
+    q: string;
+    a: RichDoc | string;
+}[]): Record<string, unknown>;
+/**
+ * Questions and answers — 0 JS: native `<details name>` (exclusive accordion), animated with
+ * `::details-content` where supported; closed answers stay findable by in-page search.
+ * Server component.
+ *
+ * ```tsx
+ * <Faq title="Before you *book*" items={[{ q: "Is there parking?", a: "Yes — two hours free in the Piazza garage." }]} />
+ * ```
+ */
+export declare function Faq({ variant, eyebrow, title, lead, items, exclusive, openFirst, contact, deepLink, id, theme, anchor, className, headingLevel, labels, locale, components, editMode, }: FaqProps): React.JSX.Element;

package/dist/blocks/site/faq.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { slugify } from "../../lib/text.js";
+import { Container, Section } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { BlockLink } from "../block-link.js";
+import { RichText } from "../rich-text.js";
+import { richToText } from "../schema/rich-doc.js";
+import { ArrowEnd, siteText, useBlockIds } from "./_kit-1.js";
+import { Stagger } from "../../motion/reveal.js";
+/** `FAQPage` JSON-LD for the items. */
+export function faqJsonLd(items) {
+    return {
+        "@type": "FAQPage",
+        mainEntity: items.map((it) => ({
+            "@type": "Question",
+            name: it.q,
+            acceptedAnswer: { "@type": "Answer", text: typeof it.a === "string" ? it.a : richToText(it.a) },
+        })),
+    };
+}
+const DEEP_LINK = `(function(){var h=decodeURIComponent(location.hash.slice(1));if(!h)return;var d=document.getElementById(h);if(d&&d.tagName==="DETAILS")d.open=true;})();`;
+/**
+ * Questions and answers — 0 JS: native `<details name>` (exclusive accordion), animated with
+ * `::details-content` where supported; closed answers stay findable by in-page search.
+ * Server component.
+ *
+ * ```tsx
+ * <Faq title="Before you *book*" items={[{ q: "Is there parking?", a: "Yes — two hours free in the Piazza garage." }]} />
+ * ```
+ */
+export function Faq({ variant = "split", eyebrow, title, lead, items, exclusive = true, openFirst, contact, deepLink = true, id, theme, anchor, className, headingLevel = 2, labels, locale, components, editMode, }) {
+    const t = siteText(labels, locale);
+    const { base, headingId } = useBlockIds(id, "faq");
+    const QTag = `h${Math.min(headingLevel + 1, 6)}`;
+    const itemId = (it) => it.id ?? `faq-${slugify(it.q, { locale, maxLength: 48 })}`;
+    const answer = (it, i) => (_jsx(RichText, { doc: it.a, headingOffset: 2, components: components, labels: labels, locale: locale, editMode: editMode, field: `props.items.${i}.a`, className: "text-fg-muted" }));
+    const contactEl = contact ? (_jsxs("p", { className: "flex flex-col gap-1 text-small text-fg-muted", children: [_jsx("span", { children: t("faqMore") }), _jsxs(BlockLink, { href: contact.link.href, newTab: contact.link.newTab, appearance: "link", components: components, labels: labels, locale: locale, className: "w-fit text-body", children: [contact.link.label, _jsx(ArrowEnd, {})] })] })) : null;
+    const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale }) : null;
+    const list = variant === "columns" ? (_jsx(Stagger, { asChild: true, effect: "fade", disabled: editMode, children: _jsx("dl", { className: "grid gap-x-(--gutter) @4xl:grid-cols-2", children: items.map((it, i) => (_jsxs("div", { id: itemId(it), className: "flex flex-col gap-3 border-t border-line py-7", children: [_jsx("dt", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg text-balance", "data-field": editMode ? `props.items.${i}.q` : undefined, children: it.q }), _jsx("dd", { className: "m-0", children: answer(it, i) })] }, i))) }) })) : (_jsx(Stagger, { asChild: true, effect: "fade", disabled: editMode, children: _jsx("div", { className: "vb-faq-list border-b border-line", children: items.map((it, i) => (_jsxs("details", { id: itemId(it), name: exclusive ? `${base}-faq` : undefined, open: openFirst && i === 0 ? true : undefined, className: "vb-faq-item group/faq border-t border-line", children: [_jsxs("summary", { className: "vb-faq-q flex cursor-pointer list-none items-start justify-between gap-6 py-6 text-start focus-ring rounded-[2px]", children: [_jsx(QTag, { className: "text-h3 font-semibold tracking-[-0.012em] text-fg text-balance", "data-field": editMode ? `props.items.${i}.q` : undefined, children: it.q }), _jsx("span", { "aria-hidden": true, className: "vb-faq-marker relative mt-[0.45em] size-3.5 shrink-0" })] }), _jsx("div", { className: "vb-faq-a max-w-[64ch] pb-7 pe-10", children: answer(it, i) })] }, i))) }) }));
+    let content;
+    if (variant === "split") {
+        content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12", children: [_jsx("div", { className: "@4xl:col-span-4", children: _jsxs("div", { className: "flex flex-col gap-8 @4xl:sticky @4xl:top-[calc(var(--vb-nav-h,4.5rem)+2rem)]", children: [header, contactEl] }) }), _jsx("div", { className: "@4xl:col-span-7 @4xl:col-start-6", children: list })] }));
+    }
+    else if (variant === "stacked") {
+        content = (_jsxs(Container, { className: "flex flex-col gap-10", children: [header, _jsx("div", { className: "max-w-(--prose)", children: list }), contactEl] }));
+    }
+    else {
+        content = (_jsxs(Container, { className: "flex flex-col gap-10", children: [header ? _jsxs("div", { className: "flex flex-col gap-6 @4xl:flex-row @4xl:items-end @4xl:justify-between", children: [header, contactEl] }) : contactEl, list] }));
+    }
+    return (_jsxs(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "faq", editMode: editMode, className: cn("vb-faq", className), "data-variant": variant, children: [content, deepLink && variant !== "columns" ? _jsx("script", { dangerouslySetInnerHTML: { __html: DEEP_LINK } }) : null] }));
+}

package/dist/blocks/site/feature-grid.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type SiteBlockLabels, type SiteCta, type SiteImage } from "./_kit-1.js";
+export type FeatureGridVariant = "list" | "grid" | "tabs" | "sticky-media";
+export interface FeatureItem {
+    title: React.ReactNode;
+    text?: React.ReactNode;
+    /** Lucide name ("calendar-check") or a node. Small, before the title, never boxed. */
+    icon?: React.ReactNode;
+    media?: SiteImage;
+    /** Makes the whole row clickable (one link, stretched with `::after`). */
+    link?: {
+        href: string;
+        label?: React.ReactNode;
+        newTab?: boolean;
+    };
+}
+export interface FeatureGridProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * list (default): two columns of rows, hairline above each, mono 01 index, no cards.
+     * grid: 3–4 columns, a 1px top rule per item, optional small icon before the title.
+     * tabs: feature titles on the start side, the selected one's image on the end side.
+     * sticky-media: a sticky image on the start side swaps as the list scrolls (CSS view timelines).
+     */
+    variant?: FeatureGridVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    /** Header actions (≤ 2). */
+    actions?: SiteCta[];
+    items: FeatureItem[];
+    /** Mono index numbers. Default: true for list, false otherwise. */
+    numbered?: boolean;
+    /** grid: column count on wide containers. Default 3. */
+    columns?: 2 | 3 | 4;
+    labels?: SiteBlockLabels;
+}
+/**
+ * Services, treatments or product modules — without the card wall. Server component; the `tabs`
+ * variant is a Radix Tabs island, `sticky-media` is CSS only.
+ *
+ * ```tsx
+ * <FeatureGrid title="What we *build*" items={[{ title: "Restaurant sites", text: "Menus your staff can edit…" }]} />
+ * ```
+ */
+export declare function FeatureGrid({ variant, eyebrow, title, lead, actions, items, numbered, columns, id, theme, anchor, className, headingLevel, labels, locale, components, editMode, }: FeatureGridProps): React.JSX.Element;

package/dist/blocks/site/feature-grid.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Container, Section } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { FeatureTabs } from "./feature-tabs.js";
+import { SiteIcon } from "./_site-icon-1.js";
+import { ArrowEnd, indexLabel, useBlockIds } from "./_kit-1.js";
+import { Stagger } from "../../motion/reveal.js";
+const plain = (n) => (typeof n === "string" ? n : undefined);
+/**
+ * Services, treatments or product modules — without the card wall. Server component; the `tabs`
+ * variant is a Radix Tabs island, `sticky-media` is CSS only.
+ *
+ * ```tsx
+ * <FeatureGrid title="What we *build*" items={[{ title: "Restaurant sites", text: "Menus your staff can edit…" }]} />
+ * ```
+ */
+export function FeatureGrid({ variant = "list", eyebrow, title, lead, actions, items, numbered, columns = 3, id, theme, anchor, className, headingLevel = 2, labels, locale, components, editMode, }) {
+    const { base, headingId } = useBlockIds(id, "features");
+    // Two items never make a grid: fall back to the list.
+    const v = variant === "grid" && items.length <= 2 ? "list" : variant;
+    const showIndex = numbered ?? v === "list";
+    const ItemTag = `h${Math.min(headingLevel + 1, 6)}`;
+    const linkProps = { components, labels, locale };
+    const itemTitle = (it, i, cls) => (_jsx(ItemTag, { className: cn("text-h3 font-semibold tracking-[-0.012em] text-fg text-balance", cls), "data-field": editMode ? `props.items.${i}.title` : undefined, children: it.link ? (_jsx(BlockLink, { href: it.link.href, newTab: it.link.newTab, ...linkProps, className: "vb-stretched rounded-[2px] focus-ring", children: it.title })) : (it.title) }));
+    const itemText = (it, i, cls) => it.text ? (_jsx("p", { className: cn("text-body text-fg-muted text-pretty", cls), "data-field": editMode ? `props.items.${i}.text` : undefined, children: it.text })) : null;
+    const more = (it) => it.link?.label ? (_jsxs("span", { "aria-hidden": true, className: "mt-auto inline-flex items-center gap-1.5 pt-2 text-small font-medium text-fg", children: [it.link.label, _jsx(ArrowEnd, { className: "group-hover/fi:translate-x-0.5 rtl:group-hover/fi:-translate-x-0.5" })] })) : null;
+    let body;
+    if (v === "tabs") {
+        body = (_jsxs(_Fragment, { children: [_jsx(FeatureTabs, { className: "hidden @4xl:grid", label: plain(title), items: items.map((it, i) => ({
+                        value: `f${i}`,
+                        title: it.title,
+                        text: it.text,
+                        panel: (_jsxs("div", { className: "flex flex-col gap-4", children: [it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: "(min-width: 56rem) 55vw, 100vw", className: "rounded-ui border border-line", components: components, labels: labels }) : null, it.link ? (_jsxs(BlockLink, { href: it.link.href, newTab: it.link.newTab, appearance: "link", ...linkProps, children: [it.link.label ?? it.title, _jsx(ArrowEnd, {})] })) : null] })),
+                    })) }), _jsx("ol", { className: "flex flex-col @4xl:hidden", children: items.map((it, i) => (_jsxs("li", { className: "flex flex-col gap-3 border-t border-line py-6", children: [itemTitle(it, i), itemText(it, i), it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: "100vw", className: "mt-2 rounded-ui border border-line", components: components, labels: labels }) : null] }, i))) })] }));
+    }
+    else if (v === "sticky-media") {
+        const names = items.map((_, i) => `--vbf-${base.replace(/[^a-zA-Z0-9_-]/g, "")}-${i}`);
+        body = (_jsxs("div", { className: "vb-sticky-features grid gap-x-(--gutter) @4xl:grid-cols-12", style: { timelineScope: names.join(", ") }, children: [_jsx("div", { className: "vb-sticky-media", "aria-hidden": true, children: _jsx("div", { className: "sticky top-[calc(var(--vb-nav-h,4.5rem)+2rem)]", children: _jsx("div", { className: "relative overflow-hidden rounded-ui", children: items.map((it, i) => it.media ? (_jsx(BlockImage, { ...it.media, decorative: true, aspect: "4:5", sizes: "(min-width: 56rem) 45vw, 100vw", className: cn("vb-sticky-frame", i > 0 && "absolute! inset-0"), "data-pos": i === 0 ? "first" : i === items.length - 1 ? "last" : undefined, style: { "--vbf-timeline": names[i], zIndex: i }, components: components }, i)) : null) }) }) }), _jsx("ol", { className: "vb-sticky-list flex flex-col", children: items.map((it, i) => (_jsxs("li", { className: "vb-sticky-item flex min-h-[min(70svh,34rem)] flex-col justify-center gap-4 border-t border-line py-10", style: { viewTimelineName: names[i] }, children: [it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: "100vw", className: "vb-sticky-inline mb-2 rounded-ui", components: components, labels: labels }) : null, _jsx("span", { className: "font-mono text-eyebrow tabular text-fg-subtle", children: indexLabel(i) }), itemTitle(it, i, "text-display-m font-display font-normal"), itemText(it, i, "max-w-[46ch]"), it.link ? (_jsxs(BlockLink, { href: it.link.href, newTab: it.link.newTab, appearance: "link", ...linkProps, className: "mt-2", children: [it.link.label ?? it.title, _jsx(ArrowEnd, {})] })) : null] }, i))) })] }));
+    }
+    else if (v === "grid") {
+        body = (_jsx("ul", { className: cn("grid gap-x-(--gutter) gap-y-12 @2xl:grid-cols-2", columns >= 3 && "@4xl:grid-cols-3", columns === 4 && "@6xl:grid-cols-4", columns === 2 && "@4xl:grid-cols-2"), children: items.map((it, i) => (_jsxs("li", { className: cn("group/fi relative flex flex-col gap-3 border-t border-line pt-4", it.link && "vb-linked"), children: [it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: "(min-width: 56rem) 30vw, 100vw", className: "mb-2 rounded-ui", components: components, labels: labels }) : null, _jsxs("div", { className: "flex items-start gap-3 pt-2", children: [showIndex ? _jsx("span", { className: "pt-1.5 font-mono text-eyebrow tabular text-fg-subtle", children: indexLabel(i) }) : null, it.icon ? _jsx(SiteIcon, { icon: it.icon, className: "mt-1" }) : null, itemTitle(it, i)] }), itemText(it, i), more(it)] }, i))) }));
+    }
+    else {
+        body = (_jsx("ol", { className: "grid gap-x-(--gutter) @4xl:grid-cols-2", children: items.map((it, i) => (_jsxs("li", { className: cn("group/fi relative grid grid-cols-[3rem_1fr] gap-x-4 gap-y-3 border-t border-line py-7 @2xl:grid-cols-[4.5rem_1fr]", it.link && "vb-linked", !showIndex && "grid-cols-1!"), children: [showIndex ? _jsx("span", { className: "row-span-3 pt-1.5 font-mono text-eyebrow tabular text-fg-subtle", children: indexLabel(i) }) : null, itemTitle(it, i), itemText(it, i, "max-w-[52ch]"), more(it)] }, i))) }));
+    }
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "features", editMode: editMode, components: components, labels: labels, className: cn("vb-features", className), "data-variant": v, children: _jsxs(Container, { className: "flex flex-col gap-[calc(var(--section-y)*0.45)]", children: [title || eyebrow || lead ? (_jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, align: lead ? "split" : "start", headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale, actions: actions?.length ? actions.map((a, i) => (_jsxs(BlockLink, { href: a.link.href, newTab: a.link.newTab, appearance: a.style ?? "link", ...linkProps, children: [a.link.label, (a.style ?? "link") === "link" ? _jsx(ArrowEnd, {}) : null] }, i))) : undefined })) : null, v === "list" || v === "grid" ? (_jsx(Stagger, { asChild: true, disabled: editMode, children: body })) : (_jsx("div", { children: body }))] }) }));
+}

package/dist/blocks/site/feature-tabs.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface FeatureTabsItem {
+    value: string;
+    /** Tab label (feature title). */
+    title: React.ReactNode;
+    /** Short text under the active tab. */
+    text?: React.ReactNode;
+    /** Server-rendered panel (large image / screenshot + link). */
+    panel: React.ReactNode;
+}
+export interface FeatureTabsProps {
+    items: FeatureTabsItem[];
+    /** Accessible name of the tab list (the section title as text). */
+    label?: string;
+    defaultValue?: string;
+    className?: string;
+}
+/**
+ * Tabs island of the Feature grid `tabs` variant (WAI-ARIA Tabs via Radix, vertical arrow keys).
+ * Feature titles on the start side, the selected feature's media on the end side.
+ */
+export declare function FeatureTabs({ items, label, defaultValue, className }: FeatureTabsProps): React.JSX.Element;

package/dist/blocks/site/feature-tabs.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs } from "radix-ui";
+import { cn } from "../../lib/cn.js";
+/**
+ * Tabs island of the Feature grid `tabs` variant (WAI-ARIA Tabs via Radix, vertical arrow keys).
+ * Feature titles on the start side, the selected feature's media on the end side.
+ */
+export function FeatureTabs({ items, label, defaultValue, className }) {
+    return (_jsxs(Tabs.Root, { orientation: "vertical", defaultValue: defaultValue ?? items[0]?.value, className: cn("grid gap-x-(--gutter) gap-y-8 @4xl:grid-cols-12", className), children: [_jsx(Tabs.List, { "aria-label": label, className: "flex flex-col border-s border-line @4xl:col-span-5", children: items.map((it) => (_jsxs(Tabs.Trigger, { value: it.value, className: "vb-feature-tab group/ft relative -ms-px flex flex-col items-start gap-2 border-s-2 border-transparent py-4 ps-6 pe-2 text-start outline-none transition-colors focus-ring data-[state=active]:border-accent", children: [_jsx("span", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg-muted transition-colors group-hover/ft:text-fg group-data-[state=active]/ft:text-fg", children: it.title }), it.text ? _jsx("span", { className: "hidden max-w-[52ch] text-body text-fg-muted group-data-[state=active]/ft:block", children: it.text }) : null] }, it.value))) }), items.map((it) => (_jsx(Tabs.Content, { value: it.value, className: "outline-none focus-ring @4xl:col-span-7 vb-feature-panel", children: it.panel }, it.value)))] }));
+}