@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/blocks/site/site-shell.js

@@ -0,0 +1,254 @@
+"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 { ThemeScope } from "../../lib/theme-scope.js";
+import { useControllableState } from "../../lib/use-controllable-state.js";
+import { isBuiltInAccent, siteAccent, siteAccentCss, siteAccentKey } from "./shared/site-accent.js";
+import { motionAllowed } from "../../motion/core.js";
+import { startPageTransition, viewTransitionsSupported } from "../../motion/page-transition.js";
+import { parseSiteHref, readSiteLocation, sitePageHref, writeSiteLocation } from "./shared/site-routing.js";
+const SiteShellContext = React.createContext(null);
+/** Page, locale and navigation of the closest Site shell. Throws outside one. */
+export function useSiteShell() {
+    const ctx = React.useContext(SiteShellContext);
+    if (!ctx)
+        throw new Error("useSiteShell must be used inside <SiteShell>.");
+    return ctx;
+}
+/**
+ * The frame of a demo or single-route website: EN/TR switch, inner-page switching and the
+ * site's own look (accent from one colour, font, material, density), scoped to its root.
+ *
+ * Every language and page is rendered on the server as plain blocks; the shell shows one of
+ * each and swaps on links like `?page=pricing`, `?page=home#faq` or `?lang=tr` inside it —
+ * so server-rendered Navbar and Footer links work as they are. On a page change it scrolls to
+ * the top of the site, moves focus to the page's `h1` and marks matching links
+ * `aria-current="page"`. Back/forward follow the URL. Overlays opened inside keep its theme.
+ *
+ * ```tsx
+ * <SiteShell accent="#B4532A" font="editorial" material="solid" pages={["home", "shop"]}>
+ *   <Navbar items={[{ label: "Shop", href: "?page=shop" }]} … />
+ *   <SiteShellPage id="home"><Hero … /></SiteShellPage>
+ *   <SiteShellPage id="shop"><PageIntro title="Shop" … /></SiteShellPage>
+ * </SiteShell>
+ * ```
+ */
+export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDark, font, material, density, theme, dir, locales = ["en", "tr"], locale: localeProp, defaultLocale, onLocaleChange, pages = ["home"], page: pageProp, defaultPage, onPageChange, routing = "search", pageParam = "page", localeParam = "lang", motion = "subtle", className, onClick, children, ...props }, ref) {
+    const homeLocale = defaultLocale ?? locales[0] ?? "en";
+    const homePage = defaultPage ?? pages[0] ?? "home";
+    const [locale, setLocale] = useControllableState({ value: localeProp, defaultValue: homeLocale, onChange: onLocaleChange, name: "SiteShell" });
+    const [page, setPage] = useControllableState({ value: pageProp, defaultValue: homePage, onChange: onPageChange, name: "SiteShell" });
+    const rootRef = React.useRef(null);
+    const setRoot = React.useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    /** What to do after the next render: focus the h1, scroll to the top or to an anchor. */
+    const pending = React.useRef(null);
+    const [pageEnter, setPageEnter] = React.useState(false);
+    /** Swap page/locale as a page transition: a View Transition, or a fade on the new page. */
+    const transition = React.useCallback((commit) => {
+        const root = rootRef.current;
+        const animate = motion !== "off" && motionAllowed(root);
+        setPageEnter(animate && !viewTransitionsSupported());
+        if (animate)
+            startPageTransition(commit, { scope: root });
+        else
+            commit();
+    }, [motion]);
+    const transitionRef = React.useRef(transition);
+    transitionRef.current = transition;
+    const pageKey = pages.join("|");
+    const localeKey = locales.join("|");
+    const params = React.useMemo(() => ({ pageParam, localeParam }), [pageParam, localeParam]);
+    const apply = React.useCallback((to, mode) => {
+        const nextPage = to.page && pages.includes(to.page) ? to.page : page;
+        const nextLocale = to.locale && locales.includes(to.locale) ? to.locale : locale;
+        const pageChanged = nextPage !== page;
+        if (mode !== "none" && routing !== "memory" && typeof window !== "undefined") {
+            const url = writeSiteLocation(window.location, { page: nextPage, locale: nextLocale, anchor: to.anchor }, { page: homePage, locale: homeLocale }, routing, params);
+            if (mode === "push")
+                window.history.pushState(null, "", url);
+            else
+                window.history.replaceState(null, "", url);
+        }
+        if (pageChanged)
+            pending.current = { focus: !to.anchor, scroll: true, anchor: to.anchor };
+        if (pageChanged || nextLocale !== locale) {
+            transition(() => {
+                if (nextLocale !== locale)
+                    setLocale(nextLocale);
+                if (pageChanged)
+                    setPage(nextPage);
+            });
+        }
+        else if (to.anchor)
+            scrollToAnchor(rootRef.current, to.anchor, false);
+        // The Navbar's mobile menu is a native popover: close it after any switch.
+        rootRef.current?.querySelectorAll("[popover]").forEach((p) => {
+            try {
+                p.hidePopover();
+            }
+            catch {
+                /* not open */
+            }
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [page, locale, pageKey, localeKey, routing, homePage, homeLocale, params, setLocale, setPage, transition]);
+    // URL → state on mount and on back/forward.
+    React.useEffect(() => {
+        if (routing === "memory")
+            return;
+        const sync = (initial) => {
+            const loc = readSiteLocation(window.location.search, window.location.hash, routing, params);
+            const nextPage = loc.page && pages.includes(loc.page) ? loc.page : homePage;
+            const nextLocale = loc.locale && locales.includes(loc.locale) ? loc.locale : homeLocale;
+            const anchor = routing === "search" && window.location.hash.length > 1 ? decodeURIComponent(window.location.hash.slice(1)) : undefined;
+            const commit = () => {
+                setLocale(nextLocale);
+                setPage((prev) => {
+                    if (prev !== nextPage)
+                        pending.current = { focus: !initial && !anchor, scroll: !initial, anchor: initial ? anchor : undefined };
+                    return nextPage;
+                });
+            };
+            if (initial)
+                commit();
+            else
+                transitionRef.current(commit);
+        };
+        // A deep link (`?page=order`) is server-rendered as home and switched here. As a transition,
+        // React finishes hydrating the home tree (and any Suspense boundary still dehydrated) before
+        // swapping pages, instead of re-rendering mid-hydration — which shifted useId values.
+        React.startTransition(() => sync(true));
+        const onPop = () => sync(false);
+        window.addEventListener("popstate", onPop);
+        if (routing === "hash")
+            window.addEventListener("hashchange", onPop);
+        return () => {
+            window.removeEventListener("popstate", onPop);
+            window.removeEventListener("hashchange", onPop);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [routing, pageKey, localeKey, homePage, homeLocale, params]);
+    // After a page change: scroll, focus the h1, and mark the current links.
+    React.useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const todo = pending.current;
+        pending.current = null;
+        if (todo?.anchor)
+            scrollToAnchor(root, todo.anchor, true);
+        else if (todo?.scroll) {
+            const top = root.getBoundingClientRect().top + window.scrollY;
+            if (window.scrollY > top)
+                window.scrollTo({ top: Math.max(0, top), behavior: "instant" });
+        }
+        if (todo?.focus) {
+            const h1 = root.querySelector(`[data-site-page="${cssString(page)}"] h1`) ?? root.querySelector("h1");
+            if (h1) {
+                if (!h1.hasAttribute("tabindex"))
+                    h1.setAttribute("tabindex", "-1");
+                h1.focus({ preventScroll: true });
+            }
+        }
+        root.querySelectorAll("a[href]").forEach((a) => {
+            const loc = parseSiteHref(a.getAttribute("href"), params);
+            if (!loc?.page || loc.anchor)
+                return;
+            if (loc.page === page)
+                a.setAttribute("aria-current", "page");
+            else if (a.getAttribute("aria-current") === "page")
+                a.removeAttribute("aria-current");
+        });
+    }, [page, locale, params]);
+    const handleClick = (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+            return;
+        const a = e.target?.closest?.("a[href]");
+        if (!a || (a.target && a.target !== "_self") || a.hasAttribute("download"))
+            return;
+        const loc = parseSiteHref(a.getAttribute("href"), params);
+        if (!loc)
+            return;
+        if (loc.page && !pages.includes(loc.page))
+            return;
+        if (loc.locale && !locales.includes(loc.locale))
+            return;
+        e.preventDefault();
+        apply(loc, "push");
+    };
+    const ctx = React.useMemo(() => ({
+        page,
+        locale,
+        pages,
+        locales,
+        navigate: (to) => apply(to, "push"),
+        hrefFor: (p, anchor) => sitePageHref(p, anchor, { routing, pageParam }),
+        motion,
+        pageEnter,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [page, locale, pageKey, localeKey, apply, routing, pageParam, motion, pageEnter]);
+    // A colour → scoped variables. A name (built-in preset or your own, like "brand") goes
+    // straight to data-accent.
+    const custom = accent && !isBuiltInAccent(accent) && looksLikeColour(accent) ? accent : undefined;
+    const accentStyle = React.useMemo(() => {
+        if (!custom)
+            return null;
+        try {
+            const key = siteAccentKey(`${custom}${accentDark ? `-${accentDark}` : ""}`);
+            return { key, css: siteAccentCss(siteAccent(custom, { dark: accentDark }), key) };
+        }
+        catch (err) {
+            if (process.env.NODE_ENV !== "production")
+                console.warn(`[vamos-ui] SiteShell: ${err.message}`);
+            return null;
+        }
+    }, [custom, accentDark]);
+    return (_jsx(SiteShellContext.Provider, { value: ctx, children: _jsxs(ThemeScope, { ref: setRoot, theme: theme, material: material, density: density, font: font, dir: dir, accent: accentStyle ? "site" : custom ? undefined : accent, "data-site-accent": accentStyle?.key, "data-site-shell": "", "data-motion": motion, "data-page": page, lang: locale, className: cn("vb-scope font-sans text-fg", className), onClick: handleClick, ...props, children: [accentStyle ? _jsx("style", { children: accentStyle.css }) : null, children] }) }));
+});
+const looksLikeColour = (v) => v.trim().startsWith("#") || v.includes("(");
+const cssString = (s) => s.replace(/["\\]/g, "\\$&");
+function scrollToAnchor(root, anchor, instant) {
+    const el = root?.ownerDocument.getElementById(anchor);
+    if (!el)
+        return;
+    el.scrollIntoView?.({ block: "start", behavior: instant ? "instant" : undefined });
+}
+/** One inner page: rendered only while it is the shell's current page. */
+export function SiteShellPage({ id, title, children }) {
+    const { page, pageEnter } = useSiteShell();
+    const active = page === id;
+    const first = React.useRef(true);
+    React.useEffect(() => {
+        if (active && title && !first.current)
+            document.title = title;
+        first.current = false;
+    }, [active, title]);
+    if (!active)
+        return null;
+    return (_jsx("div", { "data-site-page": id, "data-page-enter": pageEnter ? "" : undefined, className: "contents", children: children }));
+}
+/** One language version: rendered only while it is the shell's current locale (with `lang`). */
+export function SiteShellLocale({ code, children }) {
+    const { locale } = useSiteShell();
+    if (locale !== code)
+        return null;
+    return (_jsx("div", { lang: code, className: "contents", children: children }));
+}
+/**
+ * A link to an inner page for client code. Server components can use a plain
+ * `href={sitePageHref("pricing")}` instead; the shell handles both.
+ */
+export const SiteShellLink = React.forwardRef(function SiteShellLink({ page, anchor, ...props }, ref) {
+    const { hrefFor, page: current } = useSiteShell();
+    return _jsx("a", { ref: ref, href: hrefFor(page, anchor), "aria-current": !anchor && current === page ? "page" : undefined, ...props });
+});

package/dist/blocks/site/stats-band.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { RichDoc } from "../schema/rich-doc.js";
+import { type SiteBlockLabels } from "./_kit-1.js";
+export type StatsBandVariant = "inline" | "with-text" | "ledger";
+export interface StatItem {
+    /** Numbers are formatted with `Intl` (4.8 → "4,8" in tr); strings are shown verbatim ("24/7"). */
+    value: number | string;
+    /** Small superscript unit ("%", "k", "min"). */
+    unit?: string;
+    /** Spoken unit for screen readers ("percent"). `%` is spelled out automatically. */
+    unitLabel?: string;
+    label: React.ReactNode;
+    /** Where the figure comes from ("Google Business Profile, Oct 2026"). Unsourced figures read as marketing. */
+    source?: React.ReactNode;
+}
+export interface StatsBandProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * inline: 3–4 figures on one line between vertical rules; unit as a superscript, label below.
+     * with-text: a paragraph on the start side, a 2×2 grid of figures on the end side.
+     * ledger: label, dotted leader, figure — an annual report line; mono source below.
+     */
+    variant?: StatsBandVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    /** with-text: the paragraph(s) beside the figures. */
+    body?: RichDoc | string;
+    items: StatItem[];
+    labels?: SiteBlockLabels;
+}
+/**
+ * Concrete, sourced numbers ("4.8 on Google · 1,240 reviews"). Semantic `dl`, Intl formatting,
+ * units spelled out for screen readers. Numeric figures count up once when they scroll into view
+ * (motion kit CountUp: width reserved, final value for screen readers, still under reduced
+ * motion / `motion="off"`); the items reveal in sequence. Server component.
+ *
+ * ```tsx
+ * <StatsBand items={[{ value: 4.8, label: "Google rating", source: "1,240 reviews, Nov 2026" }]} />
+ * ```
+ */
+export declare function StatsBand({ variant, eyebrow, title, lead, body, items, id, theme, anchor, className, headingLevel, labels, locale, components, editMode }: StatsBandProps): React.JSX.Element;

package/dist/blocks/site/stats-band.js

@@ -0,0 +1,45 @@
+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 { RichText } from "../rich-text.js";
+import { CountUp } from "../../motion/count-up.js";
+import { Reveal, Stagger } from "../../motion/reveal.js";
+import { siteText, useBlockIds } from "./_kit-1.js";
+function formatValue(v, locale) {
+    if (typeof v !== "number")
+        return v;
+    const decimals = Math.min(2, (String(v).split(".")[1] ?? "").length);
+    return new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(v);
+}
+/**
+ * Concrete, sourced numbers ("4.8 on Google · 1,240 reviews"). Semantic `dl`, Intl formatting,
+ * units spelled out for screen readers. Numeric figures count up once when they scroll into view
+ * (motion kit CountUp: width reserved, final value for screen readers, still under reduced
+ * motion / `motion="off"`); the items reveal in sequence. Server component.
+ *
+ * ```tsx
+ * <StatsBand items={[{ value: 4.8, label: "Google rating", source: "1,240 reviews, Nov 2026" }]} />
+ * ```
+ */
+export function StatsBand({ variant = "inline", eyebrow, title, lead, body, items, id, theme, anchor, className, headingLevel = 2, labels, locale = "en-US", components, editMode }) {
+    const t = siteText(labels, locale);
+    const { base, headingId } = useBlockIds(id, "stats");
+    const figure = (s, size) => {
+        const spoken = s.unitLabel ?? (s.unit === "%" ? t("percent") : s.unit);
+        return (_jsxs("span", { className: cn("font-display tabular text-fg", size), children: [typeof s.value === "number" && !editMode ? _jsx(CountUp, { value: s.value, locale: locale }) : formatValue(s.value, locale), s.unit ? (_jsxs(_Fragment, { children: [_jsx("sup", { "aria-hidden": true, className: "vb-stat-unit ms-[0.08em] align-super font-sans text-[0.38em] font-medium tracking-normal text-fg-muted", children: s.unit }), _jsxs("span", { className: "sr-only", children: [" ", spoken] })] })) : null] }));
+    };
+    const source = (s, cls) => s.source ? (_jsxs("dd", { className: cn("font-mono text-[0.6875rem] leading-snug tracking-[0.02em] text-fg-subtle", cls), children: [_jsx("span", { className: "sr-only", children: t("source", { source: "" }) }), s.source] })) : null;
+    const header = title || eyebrow || (lead && variant !== "with-text") ? (_jsx(Reveal, { disabled: editMode, children: _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: variant === "with-text" ? undefined : lead, headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale }) })) : null;
+    let content;
+    if (variant === "ledger") {
+        content = (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12", children: [header ? _jsx("div", { className: "@4xl:col-span-4", children: header }) : null, _jsx(Stagger, { asChild: true, effect: "fade", disabled: editMode, children: _jsx("dl", { className: cn("flex flex-col border-t border-line", header ? "@4xl:col-span-7 @4xl:col-start-6" : "@4xl:col-span-12"), children: items.map((s, i) => (_jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] items-baseline gap-x-4 gap-y-1 border-b border-line py-5", "data-field": editMode ? `props.items.${i}` : undefined, children: [_jsx("dt", { className: "text-body text-fg", children: s.label }), _jsx("span", { "aria-hidden": true, className: "vb-leader self-end" }), _jsx("dd", { className: "text-end", children: figure(s, "text-display-m") }), source(s, "col-span-3")] }, i))) }) })] }));
+    }
+    else if (variant === "with-text") {
+        content = (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12 @4xl:items-start", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-5", children: [header, lead ? _jsx("p", { className: "vb-lead text-lead text-fg-muted", children: lead }) : null, body ? _jsx(RichText, { doc: body, components: components, labels: labels, locale: locale, headingOffset: 1, editMode: editMode, field: "props.body" }) : null] }), _jsx(Stagger, { asChild: true, disabled: editMode, children: _jsx("dl", { className: "grid grid-cols-2 border-s border-t border-line @4xl:col-span-6 @4xl:col-start-7", children: items.slice(0, 4).map((s, i) => (_jsxs("div", { className: "flex flex-col gap-2 border-e border-b border-line p-[clamp(1rem,3cqi,2rem)]", "data-field": editMode ? `props.items.${i}` : undefined, children: [_jsx("dt", { className: "order-2 text-small text-fg-muted text-pretty", children: s.label }), _jsx("dd", { className: "order-1", children: figure(s, "text-display-l") }), source(s, "order-3 mt-auto pt-3")] }, i))) }) })] }));
+    }
+    else {
+        content = (_jsxs("div", { className: "flex flex-col gap-12", children: [header, _jsx(Stagger, { asChild: true, disabled: editMode, children: _jsx("dl", { className: cn("grid grid-cols-2 gap-y-10", items.length >= 3 && "@4xl:grid-cols-3", items.length >= 4 && "@4xl:grid-cols-4", items.length >= 5 && "@6xl:grid-cols-5"), children: items.map((s, i) => (_jsxs("div", { className: "vb-stat-inline flex flex-col gap-2 border-line ps-[clamp(0.75rem,2.5cqi,2rem)]", "data-field": editMode ? `props.items.${i}` : undefined, children: [_jsx("dt", { className: "order-2 max-w-[24ch] text-small text-fg-muted text-pretty", children: s.label }), _jsx("dd", { className: "order-1", children: figure(s, "text-display-l") }), source(s, "order-3")] }, i))) }) })] }));
+    }
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "stats", editMode: editMode, className: cn("vb-stats", className), "data-variant": variant, children: _jsx(Container, { children: content }) }));
+}

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { SocialNetwork } from "../schema/types.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type SiteImage2 } from "./shared/kit-2.js";
+export type TeamVariant = "portrait" | "list" | "feature";
+export interface TeamMember {
+    name: React.ReactNode;
+    /** Honorific kept apart from the name ("Dr.", "Op. Dr.") — order differs per locale. */
+    title?: React.ReactNode;
+    role: React.ReactNode;
+    /** Specialty line in `list` ("Deep tissue · Sports massage"). */
+    specialty?: React.ReactNode;
+    /** 4:5 portrait. No photo = an empty inset area, never initials. */
+    photo?: SiteImage2;
+    bio?: React.ReactNode;
+    /** Up to 3 profile links, rendered as short text links ("LinkedIn"). */
+    links?: {
+        network: SocialNetwork;
+        href: string;
+    }[];
+}
+export interface TeamProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * portrait: 3–4 columns of 4:5 portraits, name + mono role below. list: a typographic list
+     * (name · role · specialty) with a portrait revealed on hover. feature: one founder or lead
+     * specialist, large portrait beside a long bio, the name set like a signature.
+     */
+    variant?: TeamVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    members: TeamMember[];
+    labels?: Site2BlockLabels;
+}
+/**
+ * Team and specialist introduction — spa therapists, clinic doctors, an agency team. Card-less
+ * by default (D6-1). Server component; the hover portrait in `list` is CSS only.
+ *
+ * ```tsx
+ * <Team title="The people behind your *treatment*" members={[{ name: "Elif Aydın", role: "Lead therapist", photo }]} />
+ * ```
+ */
+export declare function Team({ variant: variantProp, eyebrow, title, lead, members, id, anchor, theme, headingLevel, className, labels, locale, components, editMode }: TeamProps): React.JSX.Element;

package/dist/blocks/site/team.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { Section, Container } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { site2Text } from "./shared/labels-2.js";
+import { fieldAttr, textOf, useBlockIds2 } from "./shared/kit-2.js";
+import { BRAND_NAMES } from "./shared/brand-icons.js";
+/**
+ * Team and specialist introduction — spa therapists, clinic doctors, an agency team. Card-less
+ * by default (D6-1). Server component; the hover portrait in `list` is CSS only.
+ *
+ * ```tsx
+ * <Team title="The people behind your *treatment*" members={[{ name: "Elif Aydın", role: "Lead therapist", photo }]} />
+ * ```
+ */
+export function Team({ variant: variantProp = "portrait", eyebrow, title, lead, members, id, anchor, theme, headingLevel = 2, className, labels, locale = "en-US", components, editMode }) {
+    const t = site2Text(labels, locale);
+    const { headingId } = useBlockIds2(id, "team");
+    const variant = members.length === 1 ? "feature" : variantProp;
+    const ctx = { t, locale, components, labels, editMode };
+    const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale, align: variant === "portrait" ? "split" : "start" }) : null;
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "team", editMode: editMode, className: cn("vb-team", className), "data-variant": variant, children: _jsx(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: variant === "feature" ? (_jsx(FeatureMember, { member: members[0], header: header, ctx: ctx })) : (_jsxs(_Fragment, { children: [header, variant === "list" ? (_jsx("ul", { className: "vb-team-list flex flex-col border-b border-line", children: members.map((m, i) => (_jsx(ListMember, { member: m, index: i, ctx: ctx }, i))) })) : (_jsx("ul", { className: cn("grid grid-cols-2 gap-x-(--gutter) gap-y-12", members.length % 4 === 0 || members.length > 6 ? "@4xl:grid-cols-4" : "@4xl:grid-cols-3"), children: members.map((m, i) => (_jsx(PortraitMember, { member: m, index: i, ctx: ctx }, i))) }))] })) }) }));
+}
+function DisplayName({ member }) {
+    return (_jsxs(_Fragment, { children: [member.title ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-fg-muted", children: member.title }), " "] })) : null, member.name] }));
+}
+function ProfileLinks({ member, ctx, className }) {
+    if (!member.links?.length)
+        return null;
+    const name = textOf(member.name);
+    return (_jsx("span", { className: cn("flex flex-wrap gap-x-3 gap-y-1", className), children: member.links.slice(0, 3).map((l, i) => (_jsx(BlockLink, { href: l.href, newTab: true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": name ? ctx.t("profileOf", { name, network: BRAND_NAMES[l.network] }) : undefined, className: "relative z-10 text-small text-fg-muted underline decoration-line underline-offset-[0.25em] transition-colors hover:text-fg hover:decoration-current focus-ring rounded-[2px]", children: BRAND_NAMES[l.network] }, i))) }));
+}
+function Portrait({ photo, ctx, className, sizes }) {
+    if (!photo?.src)
+        return _jsx("span", { "aria-hidden": true, className: cn("block aspect-[4/5] rounded-ui bg-surface-2", className) });
+    return _jsx(BlockImage, { ...photo, alt: photo.alt ?? "", decorative: !photo.alt, aspect: "4:5", sizes: sizes, className: cn("rounded-ui", className), components: ctx.components });
+}
+function PortraitMember({ member, index, ctx }) {
+    return (_jsxs("li", { className: "flex flex-col gap-4", children: [_jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: "(min-width: 56rem) 25vw, 50vw" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1", children: [_jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", ...fieldAttr(ctx.editMode, `members.${index}.name`), children: _jsx(DisplayName, { member: member }) }), _jsx(ProfileLinks, { member: member, ctx: ctx })] }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), member.bio ? _jsx("p", { className: "mt-2 text-small text-fg-muted text-pretty", children: member.bio }) : null] })] }));
+}
+function ListMember({ member, index, ctx }) {
+    return (_jsxs("li", { className: "vb-team-row group/row relative grid grid-cols-[3.5rem_1fr] items-center gap-x-4 gap-y-1 border-t border-line py-6 @2xl:grid-cols-12 @2xl:gap-x-(--gutter)", children: [_jsx("span", { className: "row-span-2 @2xl:hidden", children: _jsx(Portrait, { photo: member.photo, ctx: ctx, className: "w-14 rounded-ui-sm", sizes: "56px" }) }), _jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg @2xl:col-span-4", ...fieldAttr(ctx.editMode, `members.${index}.name`), children: _jsx(DisplayName, { member: member }) }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted @2xl:col-span-3", children: member.role }), _jsxs("div", { className: "col-start-2 flex flex-wrap items-baseline gap-x-6 gap-y-1 @2xl:col-span-5 @2xl:col-start-auto @2xl:justify-between", children: [member.specialty ? _jsx("p", { className: "text-small text-fg-muted", children: member.specialty }) : _jsx("span", {}), _jsx(ProfileLinks, { member: member, ctx: ctx })] }), member.photo?.src ? (_jsx("span", { "aria-hidden": true, className: "vb-team-hover pointer-events-none absolute end-[22%] top-1/2 z-10 hidden w-40 -translate-y-1/2 @4xl:block", children: _jsx(BlockImage, { ...member.photo, decorative: true, aspect: "4:5", sizes: "160px", className: "rounded-ui", components: ctx.components }) })) : null] }));
+}
+function FeatureMember({ member, header, ctx }) {
+    return (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: "@4xl:col-span-5", children: _jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: "(min-width: 56rem) 40vw, 100vw" }) }), _jsxs("div", { className: "flex flex-col gap-8 @4xl:col-span-6 @4xl:col-start-7 @4xl:pt-6", children: [header, member.bio ? _jsx("div", { className: "text-lead text-fg-muted text-pretty [&_p+p]:mt-4", children: typeof member.bio === "string" ? member.bio.split(/\n{2,}/).map((p, i) => _jsx("p", { children: p }, i)) : member.bio }) : null, _jsxs("div", { className: "flex flex-col gap-2 border-t border-line pt-6", children: [_jsx("p", { className: "vb-signature font-display text-display-m italic text-fg", ...fieldAttr(ctx.editMode, "members.0.name"), children: _jsx(DisplayName, { member: member }) }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), _jsx(ProfileLinks, { member: member, ctx: ctx, className: "mt-2" })] })] })] }));
+}

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

@@ -0,0 +1,68 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type SiteImage2, type SiteLink2 } from "./shared/kit-2.js";
+export type TestimonialsVariant = "feature" | "wall" | "carousel" | "reviews";
+export type ReviewSource = "google" | "yandex" | "tripadvisor" | "trustpilot" | "direct";
+export declare const REVIEW_SOURCE_NAMES: Record<ReviewSource, string>;
+export interface TestimonialItem {
+    quote: React.ReactNode;
+    author: React.ReactNode;
+    role?: React.ReactNode;
+    company?: React.ReactNode;
+    /** Small square portrait. No avatar = name only (never an initials circle). */
+    avatar?: SiteImage2;
+    /** Company logo (feature variant). */
+    logo?: SiteImage2;
+    /** 1–5. Rendered only with a `source` (D6-8). */
+    rating?: number;
+    source?: ReviewSource;
+    /** `YYYY-MM-DD`. */
+    date?: string;
+    /** Link to the original review. */
+    link?: SiteLink2;
+}
+export interface ReviewSummary {
+    rating: number;
+    count: number;
+    source: ReviewSource;
+    link?: SiteLink2;
+}
+export interface TestimonialsProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * feature: one large serif quote with a hanging quote mark. wall: uneven columns of quotes, no
+     * cards. carousel: sliding quotes with arrows and a "3 / 8" counter (no autoplay).
+     * reviews: sticky rating summary beside a dated review list.
+     */
+    variant?: TestimonialsVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    items: TestimonialItem[];
+    /** `reviews` variant: "4.8 on Google — 1,240 reviews". */
+    summary?: ReviewSummary;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Customer voices: agency references, Google reviews for a spa or restaurant, SaaS quotes.
+ * `figure > blockquote + figcaption`, locale quotation marks, stars only with a named source.
+ * Server component; `carousel` adds a ~1 KB scroll-snap island.
+ *
+ * ```tsx
+ * <Testimonials variant="wall" title="What clients *say*" items={quotes} />
+ * ```
+ */
+export declare function Testimonials({ variant: variantProp, eyebrow, title, lead, items, summary, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: TestimonialsProps): React.JSX.Element;
+/** Monochrome stars with a text alternative ("4.8 out of 5"). */
+declare const RATING_STAR_SIZE: {
+    readonly sm: "size-3";
+    readonly md: "size-3.5";
+    readonly lg: "size-5";
+};
+export declare function RatingStars({ rating, label, size, className }: {
+    rating: number;
+    label: string;
+    size?: keyof typeof RATING_STAR_SIZE;
+    className?: string;
+}): React.JSX.Element;
+export {};

package/dist/blocks/site/testimonials.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Star } from "lucide-react";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { createFormatter } from "../../format/core.js";
+import { Section, Container } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { labelTemplates, site2Text } from "./shared/labels-2.js";
+import { fieldAttr, formatDate2, isoDay, useBlockIds2 } from "./shared/kit-2.js";
+import { TestimonialsCarousel } from "./shared/testimonials-carousel.js";
+import { carouselLabelKeys } from "./shared/island-keys.js";
+import { Reveal, Stagger } from "../../motion/reveal.js";
+export const REVIEW_SOURCE_NAMES = { google: "Google", yandex: "Yandex", tripadvisor: "Tripadvisor", trustpilot: "Trustpilot", direct: "" };
+/**
+ * Customer voices: agency references, Google reviews for a spa or restaurant, SaaS quotes.
+ * `figure > blockquote + figcaption`, locale quotation marks, stars only with a named source.
+ * Server component; `carousel` adds a ~1 KB scroll-snap island.
+ *
+ * ```tsx
+ * <Testimonials variant="wall" title="What clients *say*" items={quotes} />
+ * ```
+ */
+export function Testimonials({ variant: variantProp = "feature", eyebrow, title, lead, items, summary, id, anchor, theme, headingLevel = 2, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { headingId } = useBlockIds2(id, "testimonials");
+    const variant = variantProp === "carousel" && items.length < 2 ? "feature" : variantProp;
+    const ctx = { t, locale, components, labels, editMode };
+    const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale }) : null;
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "testimonials", editMode: editMode, className: cn("vb-testimonials", className), "data-variant": variant, children: _jsx(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: variant === "carousel" ? (_jsx(TestimonialsCarousel, { header: header, count: items.length, labels: labelTemplates(labels, carouselLabelKeys), locale: locale, children: items.map((item, i) => (_jsx(QuoteFigure, { item: item, index: i, ctx: ctx, size: "m" }, i))) })) : (_jsxs(_Fragment, { children: [variant !== "reviews" ? header : null, variant === "feature" ? (_jsx(Reveal, { disabled: editMode, children: _jsx(FeatureQuote, { item: items[0], ctx: ctx }) })) : variant === "wall" ? (_jsx(Stagger, { asChild: true, disabled: editMode, children: _jsx("ul", { className: "vb-quote-wall gap-x-(--gutter) @2xl:columns-2 @4xl:columns-3", children: items.map((item, i) => (_jsx("li", { className: "mb-12 break-inside-avoid border-t border-line pt-6", children: _jsx(QuoteFigure, { item: item, index: i, ctx: ctx }) }, i))) }) })) : (_jsx(Reveal, { disabled: editMode, children: _jsx(ReviewsLayout, { header: header, items: items, summary: summary, ctx: ctx }) }))] })) }) }));
+}
+/** Monochrome stars with a text alternative ("4.8 out of 5"). */
+const RATING_STAR_SIZE = { sm: "size-3", md: "size-3.5", lg: "size-5" };
+export function RatingStars({ rating, label, size = "md", className }) {
+    const r = Math.max(0, Math.min(5, rating));
+    const s = RATING_STAR_SIZE[size];
+    return (_jsx("span", { role: "img", "aria-label": label, className: cn("inline-flex items-center gap-0.5 text-fg", className), children: [0, 1, 2, 3, 4].map((i) => {
+            const fill = Math.max(0, Math.min(1, r - i));
+            return (_jsxs("span", { "aria-hidden": true, className: cn("relative inline-flex", s), children: [_jsx(Star, { strokeWidth: 1.5, className: cn("absolute inset-0 text-fg-subtle", s) }), fill > 0 ? (_jsx("span", { className: "absolute inset-y-0 start-0 overflow-hidden", style: { width: `${fill * 100}%` }, children: _jsx(Star, { strokeWidth: 1.5, className: cn("fill-current", s) }) })) : null] }, i));
+        }) }));
+}
+function Attribution({ item, ctx, align = "start", as: Comp = "figcaption" }) {
+    const meta = [item.role, item.company].filter(Boolean);
+    return (_jsxs(Comp, { className: cn("flex items-center gap-3", align === "between" && "justify-between"), children: [_jsxs("span", { className: "flex items-center gap-3", children: [item.avatar ? (_jsx(BlockImage, { ...item.avatar, alt: item.avatar.alt ?? "", decorative: !item.avatar.alt, aspect: "1:1", sizes: "40px", className: "size-10 shrink-0 rounded-full", components: ctx.components })) : null, _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm font-medium text-fg", children: item.author }), meta.length ? (_jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: meta.map((m, i) => (_jsxs(React.Fragment, { children: [i > 0 ? " · " : null, m] }, i))) })) : null] })] }), align === "between" && item.logo ? (_jsx(BlockImage, { ...item.logo, alt: item.logo.alt ?? "", decorative: !item.logo.alt, fit: "contain", className: "h-7 w-24 bg-transparent opacity-80", imgClassName: "vb-logo-mono", components: ctx.components })) : null] }));
+}
+function SourceLine({ item, ctx }) {
+    const showRating = item.rating !== undefined && item.source;
+    const name = item.source ? REVIEW_SOURCE_NAMES[item.source] : "";
+    if (!showRating && !item.date && !name)
+        return null;
+    return (_jsxs("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted", children: [showRating ? _jsx(RatingStars, { rating: item.rating, label: ctx.t("ratingOutOf", { rating: item.rating }) }) : null, name ? (item.link ? (_jsx(BlockLink, { href: item.link.href, newTab: item.link.newTab ?? true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", children: name })) : (_jsx("span", { children: name }))) : null, item.date ? _jsx("time", { dateTime: isoDay(item.date), children: formatDate2(isoDay(item.date), ctx.locale, "medium") }) : null] }));
+}
+function QuoteFigure({ item, index, ctx, size = "s" }) {
+    return (_jsxs("figure", { className: "flex flex-col gap-5", children: [_jsx(SourceLine, { item: item, ctx: ctx }), _jsx("blockquote", { className: cn("text-fg text-pretty", size === "m" ? "text-lead" : "text-body"), ...fieldAttr(ctx.editMode, `items.${index}.quote`), children: _jsxs("p", { children: [_jsx("span", { "aria-hidden": true, children: ctx.t("quoteOpen") }), item.quote, _jsx("span", { "aria-hidden": true, children: ctx.t("quoteClose") })] }) }), _jsx(Attribution, { item: item, ctx: ctx })] }));
+}
+function FeatureQuote({ item, ctx }) {
+    return (_jsxs("figure", { className: "grid gap-y-10 @4xl:grid-cols-12 @4xl:gap-x-(--gutter)", children: [_jsxs("blockquote", { className: "relative @4xl:col-span-10 @4xl:col-start-2", ...fieldAttr(ctx.editMode, "items.0.quote"), children: [_jsx("span", { "aria-hidden": true, className: "vb-quote-mark pointer-events-none absolute -top-[0.08em] end-full me-[0.12em] font-display text-display-l leading-none text-accent-ink", children: ctx.t("quoteOpen") }), _jsxs("p", { className: "font-display text-display-m text-fg text-pretty", children: [item.quote, _jsx("span", { "aria-hidden": true, children: ctx.t("quoteClose") })] })] }), _jsxs("figcaption", { className: "flex flex-col gap-4 border-t border-line pt-6 @4xl:col-span-10 @4xl:col-start-2", children: [_jsx(Attribution, { item: item, ctx: ctx, align: "between", as: "div" }), _jsx(SourceLine, { item: item, ctx: ctx })] })] }));
+}
+function ReviewsLayout({ header, items, summary, ctx }) {
+    const nf = createFormatter(ctx.locale);
+    const sourceName = summary ? REVIEW_SOURCE_NAMES[summary.source] : "";
+    return (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-8 @4xl:sticky @4xl:top-[calc(var(--topbar-h,0px)+2rem)] @4xl:col-span-4 @4xl:self-start", children: [header, summary ? (_jsxs("div", { className: "flex flex-col gap-3 border-t border-line pt-6", children: [_jsxs("p", { className: "flex items-baseline gap-3", children: [_jsx("span", { className: "font-display text-display-l tabular text-fg", children: nf.number(summary.rating, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }), _jsx(RatingStars, { rating: summary.rating, label: ctx.t("ratingOutOf", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }) }) })] }), _jsxs("p", { className: "text-small text-fg-muted", children: [sourceName
+                                        ? ctx.t("ratingSummary", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }), source: sourceName })
+                                        : ctx.t("ratingSummaryDirect", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }) }), " ", "\u2014 ", ctx.t("reviewCount", { count: summary.count })] }), summary.link ? (_jsx(BlockLink, { href: summary.link.href, newTab: summary.link.newTab ?? true, appearance: "link", components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "self-start text-small", children: summary.link.label ?? ctx.t("readAllReviews") })) : null] })) : null] }), _jsx("ol", { className: "flex flex-col @4xl:col-span-7 @4xl:col-start-6", children: items.map((item, i) => (_jsx("li", { className: "border-t border-line py-7 first:border-t-0 first:pt-0 @4xl:first:border-t @4xl:first:pt-7", children: _jsx(QuoteFigure, { item: item, index: i, ctx: ctx }) }, i))) })] }));
+}