@vamos-ui/react 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,40 @@
+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, no count-up animation. 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,41 @@
+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 { 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, no count-up animation. 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: [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(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("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("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("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, { className: "vb-reveal", 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,65 @@
+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";
+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(FeatureQuote, { item: items[0], ctx: ctx })) : variant === "wall" ? (_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(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))) })] }));
+}

package/dist/blocks/types.d.ts

@@ -0,0 +1,63 @@
+import type * as React from "react";
+import type { VamosImageComponent, VamosLinkComponent } from "../lib/provider.js";
+import type { BlockTheme } from "./schema/types.js";
+import type { BlockLabels } from "./labels.js";
+/** Framework bindings. Defaults: `<img>` and `<a>`. Next.js: `{ Image: NextImage, Link: NextLink }`. */
+export interface BlockAdapters {
+    Image?: VamosImageComponent;
+    Link?: VamosLinkComponent;
+}
+/** Props every block component accepts (the renderer sets them from the node). */
+export interface BlockBaseProps {
+    /** One of the block's variants. */
+    variant?: string;
+    /** Node id (`data-block-id` in edit mode). */
+    id?: string;
+    /** Level of the block's title: 1 for the page intro, 2 otherwise. The renderer sets it. */
+    headingLevel?: 1 | 2 | 3;
+    theme?: BlockTheme;
+    /** Section anchor (`#menu`). */
+    anchor?: string;
+    className?: string;
+    /** Built-in UI strings (RSC has no context). */
+    labels?: Partial<BlockLabels>;
+    /** BCP 47 locale for Intl formatting. Default `"en-US"`. */
+    locale?: string;
+    /** Framework bindings (set once with `createBlocks`). */
+    components?: BlockAdapters;
+    /** Builder canvas: emit `data-block-id` / `data-field` and empty-field placeholders. */
+    editMode?: boolean;
+}
+/** Runtime info the renderer passes to a registered block. Plain data (crosses RSC boundaries). */
+export interface BlockRuntime {
+    id: string;
+    type: string;
+    mode: "view" | "edit";
+    /** Schema version after migration. */
+    v: number;
+}
+/** What a registered block component receives: its (localized, validated) props + base props. */
+export type BlockComponentProps<P = Record<string, unknown>> = P & BlockBaseProps & {
+    /** Rendered child blocks per slot (layout blocks). */
+    slots?: Record<string, React.ReactNode>;
+    block?: BlockRuntime;
+};
+/** Plain image data accepted by `BlockImage` and every block's media props. */
+export interface ImageData {
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    blurDataURL?: string;
+    focal?: {
+        x: number;
+        y: number;
+    };
+    decorative?: boolean;
+}
+/** Plain link data accepted by `BlockLink` and every block's action props. */
+export interface LinkData {
+    href: string;
+    label: React.ReactNode;
+    newTab?: boolean;
+}

package/dist/blocks/types.js

@@ -0,0 +1,2 @@
+// Layer-1 contracts shared by every site block. Types only.
+export {};

package/dist/business/approval-flow.d.ts

@@ -0,0 +1,152 @@
+import * as React from "react";
+import { type LabelFn } from "../lib/labels.js";
+export declare const approvalFlowLabels: {
+    label: string;
+    waiting: string;
+    active: string;
+    approved: string;
+    rejected: string;
+    changes_requested: string;
+    skipped: string;
+    withdrawn: string;
+    modeAll: string;
+    modeAny: string;
+    parallel: string;
+    condition: string;
+    due: string;
+    overdue: string;
+    pending: string;
+    decidedApproved: string;
+    decidedRejected: string;
+    decidedChanges: string;
+    decisionAt: string;
+    delegatedFrom: string;
+    delegated: string;
+    submittedBy: string;
+    summary: string;
+    summaryCurrent: string;
+    approve: string;
+    reject: string;
+    requestChanges: string;
+    delegate: string;
+    note: string;
+    noteOptional: string;
+    noteRequired: string;
+    noteMissing: string;
+    delegateTo: string;
+    delegateHint: string;
+    confirmApprove: string;
+    confirmReject: string;
+    confirmChanges: string;
+    confirmDelegate: string;
+    cancel: string;
+    doneApprove: string;
+    doneReject: string;
+    doneChanges: string;
+    doneDelegate: string;
+    failed: string;
+    cantAct: string;
+};
+export type ApprovalFlowLabels = typeof approvalFlowLabels;
+export type ApprovalDecisionValue = "approved" | "rejected" | "changes_requested";
+export type ApprovalStageStatus = "waiting" | "active" | "approved" | "rejected" | "changes_requested" | "skipped" | "withdrawn";
+export interface ApprovalDecision {
+    value: ApprovalDecisionValue;
+    /** UTC ISO instant. */
+    at: string;
+    /** The approver's comment. */
+    note?: string;
+    delegatedFrom?: {
+        id: string;
+        name: string;
+    };
+}
+export interface ApprovalApprover {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    /** "Finance", "Line manager". */
+    role?: string;
+    decision?: ApprovalDecision;
+}
+export interface ApprovalStageData {
+    id: string;
+    title: string;
+    /** `"all"`: every approver must approve. `"any"`: one approval is enough. */
+    mode: "all" | "any";
+    /** Display text of the rule that added this stage ("Amount > $10,000"). */
+    condition?: string;
+    approvers: ApprovalApprover[];
+    status: ApprovalStageStatus;
+    /** SLA deadline (UTC ISO instant). */
+    dueAt?: string;
+    /** Consecutive stages with the same group run in parallel. */
+    parallelGroup?: string;
+}
+export interface ApprovalFlowProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "children"> {
+    stages: ApprovalStageData[];
+    /** First node: who submitted and when. */
+    requester?: {
+        name: string;
+        avatarUrl?: string;
+        at: string;
+        note?: string;
+    };
+    orientation?: "vertical" | "horizontal";
+    /** `"compact"` = dots + "2 of 3 approved" (list rows). Same as `<ApprovalSummary>`. */
+    variant?: "full" | "compact";
+    /** Reference time for SLA. Default: now. */
+    now?: string | number;
+    labels?: Partial<ApprovalFlowLabels>;
+}
+/**
+ * A multi-stage approval: sequential and parallel stages ("all of" / "any of"), approvers with
+ * decisions, timestamps and notes, conditions, SLA and delegation. Renders a flow the server
+ * defines; acting on it is `<ApprovalActions>`.
+ *
+ * ```tsx
+ * <ApprovalFlow requester={{ name: "Deniz Aydın", at: "2026-11-03T09:12:00Z" }} stages={stages} />
+ * ```
+ */
+export declare const ApprovalFlow: React.ForwardRefExoticComponent<ApprovalFlowProps & React.RefAttributes<HTMLOListElement>>;
+export interface ApprovalStageProps {
+    stage: ApprovalStageData;
+    last?: boolean;
+    horizontal?: boolean;
+    now?: string | number;
+    t: LabelFn<ApprovalFlowLabels>;
+}
+/** One stage node (rail + body). Rendered by `ApprovalFlow`; exported for custom layouts. */
+export declare function ApprovalStage({ stage, last, horizontal, now, t }: ApprovalStageProps): React.JSX.Element;
+export interface ApprovalSummaryProps extends React.HTMLAttributes<HTMLSpanElement> {
+    stages: ApprovalStageData[];
+    /** Show "Now: {stage}". Default `true`. */
+    showCurrent?: boolean;
+    labels?: Partial<ApprovalFlowLabels>;
+}
+/** Inline status for table rows: one dot per stage + "2 of 3 approved". */
+export declare const ApprovalSummary: React.ForwardRefExoticComponent<ApprovalSummaryProps & React.RefAttributes<HTMLSpanElement>>;
+export interface ApprovalActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The viewer is a current approver. When `false` the bar explains that instead. */
+    canAct: boolean;
+    onApprove: (note?: string) => Promise<void> | void;
+    onReject: (note: string) => Promise<void> | void;
+    onRequestChanges?: (note: string) => Promise<void> | void;
+    onDelegate?: (to: {
+        id: string;
+        name: string;
+    }, note?: string) => Promise<void> | void;
+    /** People the decision can be delegated to. */
+    delegates?: {
+        id: string;
+        name: string;
+    }[];
+    /** Actions that need a note. Default `["reject", "changes"]`. */
+    requireNoteOn?: ("approve" | "reject" | "changes")[];
+    /** Text shown when `canAct` is false. */
+    cantActReason?: string;
+    size?: "sm" | "md";
+    labels?: Partial<ApprovalFlowLabels>;
+}
+/** Approve · Request changes · Reject · Delegate, each confirmed in a dialog with a note. Results are announced. */
+export declare function ApprovalActions({ canAct, onApprove, onReject, onRequestChanges, onDelegate, delegates, requireNoteOn, cantActReason, size, labels, className, ...props }: ApprovalActionsProps): React.JSX.Element;