@vamos-ui/react 0.2.0 → 0.3.0

package/dist/blocks/site/_kit-1.d.ts

@@ -17,6 +17,7 @@ export declare const site1Labels: {
     playVideo: string;
     pauseVideo: string;
     resumeVideo: string;
+    pauseMotion: string;
     video: string;
     openCalendar: string;
     loadsCalendar: string;

package/dist/blocks/site/_kit-1.js

@@ -25,6 +25,7 @@ export const site1Labels = {
     playVideo: "Play video: {title}",
     pauseVideo: "Pause background video",
     resumeVideo: "Play background video",
+    pauseMotion: "Pause animation",
     video: "Video",
     openCalendar: "Open calendar",
     loadsCalendar: "Loads the booking calendar from {provider}",
@@ -65,6 +66,7 @@ export const site1LabelsTr = {
     playVideo: "Videoyu oynat: {title}",
     pauseVideo: "Arka plan videosunu duraklat",
     resumeVideo: "Arka plan videosunu oynat",
+    pauseMotion: "Animasyonu duraklat",
     video: "Video",
     openCalendar: "Takvimi aç",
     loadsCalendar: "Rezervasyon takvimi {provider} üzerinden yüklenir",

package/dist/blocks/site/cta.js

@@ -10,6 +10,7 @@ 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, "")}`;
@@ -28,7 +29,7 @@ export function Cta(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("div", { className: "vb-reveal", children: variant === "split" ? _jsx(Split, { ...inner }) : variant === "minimal" ? _jsx(Minimal, { ...inner }) : variant === "newsletter" ? _jsx(Newsletter, { ...inner }) : variant === "booking" ? _jsx(Booking, { ...inner }) : _jsx(Band, { ...inner }) }) }));
+    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 });

package/dist/blocks/site/faq.js

@@ -7,6 +7,7 @@ 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 {
@@ -36,7 +37,7 @@ export function Faq({ variant = "split", eyebrow, title, lead, items, exclusive
     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("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("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))) }));
+    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 })] }));

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

@@ -7,6 +7,7 @@ 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`
@@ -45,5 +46,5 @@ export function FeatureGrid({ variant = "list", eyebrow, title, lead, actions, 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, _jsx("div", { className: v === "list" || v === "grid" ? "vb-reveal" : undefined, children: body })] }) }));
+    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/gallery-section.js

@@ -7,6 +7,7 @@ import { LightboxTrigger } from "../../media/lightbox.js";
 import { site2Text } from "./shared/labels-2.js";
 import { textOf, useBlockIds2 } from "./shared/kit-2.js";
 import { GalleryLightbox } from "./shared/gallery-lightbox.js";
+import { Stagger } from "../../motion/reveal.js";
 /**
  * Venue, food and project photos — the section restaurants, spas and hotels live on. Server
  * grid; the lightbox is the Media group's viewer (focus trap, Esc, arrows, "Image 3 of 12"),
@@ -27,14 +28,14 @@ export function GallerySection({ variant: variantProp = "mosaic", eyebrow, title
         body = (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("ul", { className: "vb-filmstrip scrollbar-none flex snap-x snap-mandatory gap-2 overflow-x-auto pb-1", tabIndex: 0, "aria-label": textOf(title).replace(/\*/g, "") || t("galleryImages", { count: images.length }), children: images.map((g, i) => (_jsx("li", { className: "shrink-0 snap-start", children: _jsx(Cell, { g: g, i: i, ctx: ctx, className: "h-[clamp(15rem,38cqi,30rem)]", style: { aspectRatio: g.image.width && g.image.height ? `${g.image.width} / ${g.image.height}` : "4 / 5" }, sizes: "(min-width: 56rem) 40vw, 80vw", fill: true }) }, i))) }), _jsx("p", { className: "vb-container font-mono text-eyebrow tabular uppercase tracking-[0.08em] text-fg-muted", children: t("galleryImages", { count: images.length }) })] }));
     }
     else if (variant === "mosaic") {
-        body = (_jsx("ul", { className: "vb-mosaic grid grid-cols-2 gap-2 @2xl:grid-cols-12", children: images.map((g, i) => (_jsx("li", { "data-span": g.span ?? "1", className: "vb-mosaic-cell min-h-0", children: _jsx(Cell, { g: g, i: i, ctx: ctx, className: "size-full", sizes: "(min-width: 42rem) 66vw, 100vw", fill: true }) }, i))) }));
+        body = (_jsx(Stagger, { asChild: true, effect: "clip", disabled: editMode, children: _jsx("ul", { className: "vb-mosaic grid grid-cols-2 gap-2 @2xl:grid-cols-12", children: images.map((g, i) => (_jsx("li", { "data-span": g.span ?? "1", className: "vb-mosaic-cell min-h-0", children: _jsx(Cell, { g: g, i: i, ctx: ctx, className: "size-full", sizes: "(min-width: 42rem) 66vw, 100vw", fill: true }) }, i))) }) }));
     }
     else if (variant === "split-caption") {
         body = null;
     }
     else {
         const a = aspect === "mixed" ? undefined : aspect;
-        body = (_jsx("ul", { className: "grid grid-cols-2 gap-x-3 gap-y-6 @4xl:grid-cols-3 @4xl:gap-x-4", children: images.map((g, i) => (_jsx("li", { children: _jsxs("figure", { className: "flex flex-col gap-2.5", children: [_jsx(Cell, { g: g, i: i, ctx: ctx, aspect: a ?? "3:2", sizes: "(min-width: 56rem) 33vw, 50vw" }), g.caption ? _jsx("figcaption", { className: "text-small text-fg-muted", children: g.caption }) : null] }) }, i))) }));
+        body = (_jsx(Stagger, { asChild: true, disabled: editMode, children: _jsx("ul", { className: "grid grid-cols-2 gap-x-3 gap-y-6 @4xl:grid-cols-3 @4xl:gap-x-4", children: images.map((g, i) => (_jsx("li", { children: _jsxs("figure", { className: "flex flex-col gap-2.5", children: [_jsx(Cell, { g: g, i: i, ctx: ctx, aspect: a ?? "3:2", sizes: "(min-width: 56rem) 33vw, 50vw" }), g.caption ? _jsx("figcaption", { className: "text-small text-fg-muted", children: g.caption }) : null] }) }, i))) }) }));
     }
     const content = variant === "split-caption" ? (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12", children: [_jsx("div", { className: "@4xl:col-span-4", children: _jsx("div", { className: "flex flex-col gap-6 @4xl:sticky @4xl:top-[calc(var(--topbar-h,0px)+2rem)]", children: header }) }), _jsx("ol", { className: "flex flex-col gap-12 @4xl:col-span-7 @4xl:col-start-6", children: images.map((g, i) => (_jsx("li", { children: _jsxs("figure", { className: "flex flex-col gap-4", children: [_jsx(Cell, { g: g, i: i, ctx: ctx, sizes: "(min-width: 56rem) 58vw, 100vw" }), g.caption ? (_jsxs("figcaption", { className: "flex gap-4 text-small text-fg-muted text-pretty", children: [_jsx("span", { "aria-hidden": true, className: "font-mono text-eyebrow tabular text-fg-subtle", children: t("imageCounter", { index: i + 1, total: images.length }) }), _jsx("span", { children: g.caption })] })) : null] }) }, i))) })] })) : (_jsxs(_Fragment, { children: [header ? _jsx(Container, { children: header }) : null, variant === "filmstrip" ? _jsx("div", { className: "vb-filmstrip-wrap", children: body }) : _jsx(Container, { children: body })] }));
     return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "gallery", editMode: editMode, className: cn("vb-gallery", className), "data-variant": variant, children: _jsx("div", { className: "flex flex-col gap-10 @4xl:gap-14", children: lightbox ? (_jsx(GalleryLightbox, { items: images.map((g) => ({ src: g.image.src, alt: g.image.alt, width: g.image.width, height: g.image.height, caption: textOf(g.caption) || undefined, focalPoint: g.image.focal })), children: content })) : (content) }) }));

package/dist/blocks/site/hero.js

@@ -21,6 +21,12 @@ export function Hero(props) {
     const sectionTheme = variant === "full-bleed" ? { ...theme, mode: "dark" } : theme;
     return (_jsx(Section, { theme: sectionTheme, anchor: anchor, headingId: headingId, blockId: base, blockType: "hero", editMode: editMode, components: components, labels: labels, priority: true, "data-variant": variant, className: cn("vb-hero", className), children: variant === "split-media" ? (_jsx(SplitMedia, { ...props, headingId: headingId, headingLevel: headingLevel })) : variant === "full-bleed" ? (_jsx(FullBleed, { ...props, headingId: headingId, headingLevel: headingLevel })) : variant === "product" ? (_jsx(Product, { ...props, headingId: headingId, headingLevel: headingLevel })) : variant === "statement" ? (_jsx(Statement, { ...props, headingId: headingId, headingLevel: headingLevel })) : (_jsx(Editorial, { ...props, headingId: headingId, headingLevel: headingLevel })) }));
 }
+/**
+ * Entrance cascade (motion.css `.vm-enter`): CSS keyframes from the first paint, no JS, so the
+ * hero never waits for hydration. Follows the SiteShell motion level; off in edit mode.
+ */
+const ENTER = ["[--vm-i:0]", "[--vm-i:1]", "[--vm-i:2]", "[--vm-i:3]", "[--vm-i:4]", "[--vm-i:5]"];
+const enter = (editMode, i, kind) => editMode ? undefined : cn("vm-enter", ENTER[i], kind === "title" && "vm-enter-title", kind === "media" && "vm-enter-media");
 function Eyebrow({ children, editMode, className }) {
     if (!children)
         return null;
@@ -37,31 +43,31 @@ function Meta({ items, className }) {
     return (_jsx("dl", { className: cn("flex flex-col gap-1.5 font-mono text-small text-fg-muted", className), children: items.slice(0, 4).map((m, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { className: "text-fg-subtle after:content-['\u00B7'] after:ps-2", children: m.label }), _jsx("dd", { className: "text-fg", children: m.value })] }, i))) }));
 }
 function Title({ p, size, className }) {
-    return (_jsx(BlockHeading, { id: p.headingId, level: p.headingLevel, size: size, text: p.title, editMode: p.editMode, field: "props.title", labels: p.labels, locale: p.locale, className: cn("vb-hero-title", className) }));
+    return (_jsx(BlockHeading, { id: p.headingId, level: p.headingLevel, size: size, text: p.title, editMode: p.editMode, field: "props.title", labels: p.labels, locale: p.locale, className: cn("vb-hero-title", enter(p.editMode, 1, "title"), className) }));
 }
 /* editorial ----------------------------------------------------------- */
 function Editorial(p) {
     const { eyebrow, lead, actions, meta, media, components, labels, locale, editMode } = p;
-    return (_jsxs(_Fragment, { children: [_jsxs(Container, { className: "flex flex-col gap-8", children: [_jsx(Eyebrow, { editMode: editMode, children: eyebrow }), _jsx(Title, { p: p, size: "display-xl", className: "max-w-[18ch]" }), _jsxs("div", { className: "grid gap-x-(--gutter) gap-y-8 pt-2 @4xl:grid-cols-12 @4xl:items-end", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-6 @6xl:col-span-5", children: [_jsx(Lead, { editMode: editMode, children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, max: 1, editMode: editMode })] }), _jsx(Meta, { items: meta, className: "@4xl:col-span-4 @4xl:col-start-9 @4xl:items-end @4xl:text-end" })] })] }), media ? (_jsx("div", { className: "vb-hero-strip mt-[calc(var(--section-y)*0.6)]", children: _jsx(BlockImage, { ...media, aspect: "21:9", priority: true, sizes: "100vw", components: components, labels: labels, editMode: editMode, field: "props.media" }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Container, { className: "flex flex-col gap-8", children: [_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow }), _jsx(Title, { p: p, size: "display-xl", className: "max-w-[18ch]" }), _jsxs("div", { className: "grid gap-x-(--gutter) gap-y-8 pt-2 @4xl:grid-cols-12 @4xl:items-end", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-6 @6xl:col-span-5", children: [_jsx(Lead, { editMode: editMode, className: enter(editMode, 2), children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, max: 1, editMode: editMode, className: enter(editMode, 3) })] }), _jsx(Meta, { items: meta, className: cn("@4xl:col-span-4 @4xl:col-start-9 @4xl:items-end @4xl:text-end", enter(editMode, 4)) })] })] }), media ? (_jsx("div", { className: cn("vb-hero-strip mt-[calc(var(--section-y)*0.6)]", enter(editMode, 4, "media")), children: _jsx(BlockImage, { ...media, aspect: "21:9", priority: true, sizes: "100vw", components: components, labels: labels, editMode: editMode, field: "props.media" }) })) : null] }));
 }
 /* split-media ---------------------------------------------------------- */
 function SplitMedia(p) {
     const { eyebrow, lead, actions, meta, media, caption, components, labels, locale, editMode } = p;
-    return (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsxs("div", { className: "order-2 flex flex-col gap-7 @4xl:order-1 @4xl:col-span-7 @4xl:pt-[calc(var(--section-y)*0.35)] @6xl:pe-[calc(var(--gutter)*2)]", children: [_jsx(Eyebrow, { editMode: editMode, children: eyebrow }), _jsx(Title, { p: p, size: "display-xl" }), _jsx(Lead, { editMode: editMode, className: "max-w-[46ch]", children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode, className: "pt-2" }), _jsx(Meta, { items: meta, className: "mt-auto border-t border-line pt-5 @4xl:mt-10" })] }), media ? (_jsxs("figure", { className: "vb-hero-portrait vb-bleed-end relative order-1 my-0 @4xl:order-2 @4xl:col-span-5", ...field(editMode, "media"), children: [_jsx(BlockImage, { ...media, aspect: "4:5", priority: true, sizes: "(min-width: 56rem) 42vw, 100vw", className: "aspect-square! @4xl:aspect-[4/5]!", components: components, labels: labels }), caption ? (_jsx("figcaption", { className: "absolute bottom-0 start-0 bg-scene px-3 py-2 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", ...field(editMode, "caption"), children: caption })) : null] })) : null] }));
+    return (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsxs("div", { className: "order-2 flex flex-col gap-7 @4xl:order-1 @4xl:col-span-7 @4xl:pt-[calc(var(--section-y)*0.35)] @6xl:pe-[calc(var(--gutter)*2)]", children: [_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow }), _jsx(Title, { p: p, size: "display-xl" }), _jsx(Lead, { editMode: editMode, className: cn("max-w-[46ch]", enter(editMode, 2)), children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode, className: cn("pt-2", enter(editMode, 3)) }), _jsx(Meta, { items: meta, className: cn("mt-auto border-t border-line pt-5 @4xl:mt-10", enter(editMode, 4)) })] }), media ? (_jsxs("figure", { className: cn("vb-hero-portrait vb-bleed-end relative order-1 my-0 @4xl:order-2 @4xl:col-span-5", enter(editMode, 1, "media")), ...field(editMode, "media"), children: [_jsx(BlockImage, { ...media, aspect: "4:5", priority: true, sizes: "(min-width: 56rem) 42vw, 100vw", className: "aspect-square! @4xl:aspect-[4/5]!", components: components, labels: labels }), caption ? (_jsx("figcaption", { className: "absolute bottom-0 start-0 bg-scene px-3 py-2 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", ...field(editMode, "caption"), children: caption })) : null] })) : null] }));
 }
 /* full-bleed ----------------------------------------------------------- */
 function FullBleed(p) {
     const { eyebrow, lead, actions, media, video, aside, height = "auto", components, labels, locale, editMode } = p;
     const t = siteText(labels, locale);
-    return (_jsxs("div", { className: cn("vb-hero-bleed", height === "screen" && "vb-hero-screen"), children: [_jsxs("div", { className: "vb-hero-media", "aria-hidden": video ? undefined : "true", children: [media ? (_jsx(BlockImage, { ...media, decorative: true, priority: true, sizes: "100vw", className: "absolute inset-0 h-full", components: components, labels: labels, editMode: editMode, field: "props.media" })) : null, video && media ? _jsx(HeroVideo, { src: video.src, poster: media.src, pauseLabel: t("pauseVideo"), playLabel: t("resumeVideo") }) : null] }), _jsxs(Container, { className: "relative z-[1] grid w-full content-end 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 @6xl:col-span-7", children: [_jsx(Eyebrow, { editMode: editMode, children: eyebrow }), _jsx(Title, { p: p, size: "display-xl" }), _jsx(Lead, { editMode: editMode, className: "max-w-[52ch] text-fg", children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode, className: "pt-2" })] }), aside ? (_jsxs("aside", { className: "vb-hero-aside surface flex flex-col gap-3 rounded-ui p-5 @4xl:col-span-4 @4xl:col-start-9 @6xl:col-span-3 @6xl:col-start-10", ...field(editMode, "aside"), children: [_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: aside.title }), aside.body ? _jsx("p", { className: "text-body tabular text-fg", children: aside.body }) : null, aside.cta ? _jsx(CtaList, { actions: [aside.cta], components: components, labels: labels, locale: locale, size: "md", max: 1, className: "pt-1 [&>a]:w-full" }) : null] })) : null] })] }));
+    return (_jsxs("div", { className: cn("vb-hero-bleed", height === "screen" && "vb-hero-screen"), children: [_jsxs("div", { className: cn("vb-hero-media", enter(editMode, 0, "media")), "aria-hidden": video ? undefined : "true", children: [media ? (_jsx(BlockImage, { ...media, decorative: true, priority: true, sizes: "100vw", className: "absolute inset-0 h-full", components: components, labels: labels, editMode: editMode, field: "props.media" })) : null, video && media ? _jsx(HeroVideo, { src: video.src, poster: media.src, pauseLabel: t("pauseVideo"), playLabel: t("resumeVideo") }) : null] }), _jsxs(Container, { className: "relative z-[1] grid w-full content-end 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 @6xl:col-span-7", children: [_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow }), _jsx(Title, { p: p, size: "display-xl" }), _jsx(Lead, { editMode: editMode, className: cn("max-w-[52ch] text-fg", enter(editMode, 2)), children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode, className: cn("pt-2", enter(editMode, 3)) })] }), aside ? (_jsxs("aside", { className: cn("vb-hero-aside surface flex flex-col gap-3 rounded-ui p-5 @4xl:col-span-4 @4xl:col-start-9 @6xl:col-span-3 @6xl:col-start-10", enter(editMode, 4)), ...field(editMode, "aside"), children: [_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: aside.title }), aside.body ? _jsx("p", { className: "text-body tabular text-fg", children: aside.body }) : null, aside.cta ? _jsx(CtaList, { actions: [aside.cta], components: components, labels: labels, locale: locale, size: "md", max: 1, className: "pt-1 [&>a]:w-full" }) : null] })) : null] })] }));
 }
 /* product -------------------------------------------------------------- */
 function Product(p) {
     const { eyebrow, lead, actions, release, screenshot, visual, meta, components, labels, locale, editMode } = p;
-    return (_jsxs(Container, { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-col gap-7", children: [release ? (_jsxs(BlockLink, { href: release.href, components: components, labels: labels, locale: locale, editMode: editMode, field: "props.release", className: "group/rel inline-flex w-fit items-center gap-3 rounded-full border border-line py-1 ps-1 pe-3.5 text-small text-fg-muted transition-colors hover:border-field-border-hover hover:text-fg focus-ring", children: [release.tag ? _jsx("span", { className: "rounded-full bg-accent-soft px-2.5 py-0.5 font-mono text-eyebrow tracking-[0.04em] text-accent-ink", children: release.tag }) : null, _jsx("span", { children: release.label }), _jsx(ArrowEnd, { className: "group-hover/rel:translate-x-0.5 rtl:group-hover/rel:-translate-x-0.5" })] })) : (_jsx(Eyebrow, { editMode: editMode, children: eyebrow })), _jsxs("div", { className: "grid gap-x-(--gutter) gap-y-7 @4xl:grid-cols-12 @4xl:items-end", children: [_jsx(Title, { p: p, size: "display-xl", className: "@4xl:col-span-8" }), _jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-4", children: [_jsx(Lead, { editMode: editMode, children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, size: "md", editMode: editMode })] })] }), _jsx(Meta, { items: meta, className: "flex-row flex-wrap gap-x-6" })] }), screenshot || visual ? (_jsx("div", { className: "vb-hero-shot mt-[calc(var(--section-y)*0.55)]", ...field(editMode, "screenshot"), children: visual ?? _jsx(BlockImage, { ...screenshot, priority: true, sizes: "min(100vw, 90rem)", components: components, labels: labels }) })) : null] }));
+    return (_jsxs(Container, { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-col gap-7", children: [release ? (_jsxs(BlockLink, { href: release.href, components: components, labels: labels, locale: locale, editMode: editMode, field: "props.release", className: cn("group/rel inline-flex w-fit items-center gap-3 rounded-full border border-line py-1 ps-1 pe-3.5 text-small text-fg-muted transition-colors hover:border-field-border-hover hover:text-fg focus-ring", enter(editMode, 0)), children: [release.tag ? _jsx("span", { className: "rounded-full bg-accent-soft px-2.5 py-0.5 font-mono text-eyebrow tracking-[0.04em] text-accent-ink", children: release.tag }) : null, _jsx("span", { children: release.label }), _jsx(ArrowEnd, { className: "group-hover/rel:translate-x-0.5 rtl:group-hover/rel:-translate-x-0.5" })] })) : (_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow })), _jsxs("div", { className: "grid gap-x-(--gutter) gap-y-7 @4xl:grid-cols-12 @4xl:items-end", children: [_jsx(Title, { p: p, size: "display-xl", className: "@4xl:col-span-8" }), _jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-4", children: [_jsx(Lead, { editMode: editMode, className: enter(editMode, 2), children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, size: "md", editMode: editMode, className: enter(editMode, 3) })] })] }), _jsx(Meta, { items: meta, className: cn("flex-row flex-wrap gap-x-6", enter(editMode, 4)) })] }), screenshot || visual ? (_jsx("div", { className: cn("vb-hero-shot mt-[calc(var(--section-y)*0.55)]", enter(editMode, 5, "media")), ...field(editMode, "screenshot"), children: visual ?? _jsx(BlockImage, { ...screenshot, priority: true, sizes: "min(100vw, 90rem)", components: components, labels: labels }) })) : null] }));
 }
 /* statement ------------------------------------------------------------ */
 function Statement(p) {
     const { eyebrow, services, actions, components, labels, locale, editMode } = p;
-    return (_jsxs(Container, { className: "flex flex-col items-center gap-10 text-center", children: [_jsx(Eyebrow, { editMode: editMode, children: eyebrow }), _jsx(Title, { p: p, size: "display-2xl", className: "max-w-[16ch]" }), services?.length ? (_jsx("ul", { className: "flex max-w-(--prose) flex-wrap justify-center gap-x-3 gap-y-2 text-lead text-fg-muted", ...field(editMode, "services"), children: services.map((s, i) => (_jsxs("li", { className: "flex items-baseline gap-3", children: [i > 0 ? (_jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: "/" })) : null, _jsx(BlockLink, { href: s.href, components: components, labels: labels, locale: locale, className: "rounded-[2px] text-fg underline decoration-line underline-offset-[0.25em] transition-[text-decoration-color] hover:decoration-current focus-ring", children: s.label })] }, i))) })) : null, _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode, className: "justify-center" })] }));
+    return (_jsxs(Container, { className: "flex flex-col items-center gap-10 text-center", children: [_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow }), _jsx(Title, { p: p, size: "display-2xl", className: "max-w-[16ch]" }), services?.length ? (_jsx("ul", { className: cn("flex max-w-(--prose) flex-wrap justify-center gap-x-3 gap-y-2 text-lead text-fg-muted", enter(editMode, 2)), ...field(editMode, "services"), children: services.map((s, i) => (_jsxs("li", { className: "flex items-baseline gap-3", children: [i > 0 ? (_jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: "/" })) : null, _jsx(BlockLink, { href: s.href, components: components, labels: labels, locale: locale, className: "rounded-[2px] text-fg underline decoration-line underline-offset-[0.25em] transition-[text-decoration-color] hover:decoration-current focus-ring", children: s.label })] }, i))) })) : null, _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode, className: cn("justify-center", enter(editMode, 3)) })] }));
 }

package/dist/blocks/site/logo-strip.d.ts

@@ -16,7 +16,8 @@ export interface LogoItem {
 export interface LogoStripProps extends Omit<BlockBaseProps, "variant" | "labels"> {
     /**
      * row: caption at the start, logos on one line at an equal optical height (28px).
-     * marquee: an endless band with faded edges; pauses on hover/focus; static under reduced motion.
+     * marquee: an endless band with faded edges (Ticker); pauses on hover/focus and with its pause
+     * control; static under reduced motion and `motion="off"`.
      * grid: 4–6 columns separated by 1px gridlines, logos centred in cells.
      */
     variant?: LogoStripVariant;
@@ -32,8 +33,9 @@ export interface LogoStripProps extends Omit<BlockBaseProps, "variant" | "labels
     labels?: SiteBlockLabels;
 }
 /**
- * "Brands we work with" proof. Server component; the marquee is CSS keyframes (paused on
- * hover, focus and reduced motion; the duplicate copy is `aria-hidden`).
+ * "Brands we work with" proof. Server component; the marquee is the motion kit's Ticker: CSS
+ * keyframes, paused on hover, focus and with its pause control; static under reduced motion and
+ * SiteShell `motion="off"`; the duplicate copy is `aria-hidden` and `inert`).
  *
  * ```tsx
  * <LogoStrip caption="Trusted by 120+ businesses since 2014" logos={[{ name: "Kıyı", image: { src, width, height } }]} />

package/dist/blocks/site/logo-strip.js

@@ -3,10 +3,12 @@ import { cn } from "../../lib/cn.js";
 import { Container, Section } from "../section.js";
 import { BlockImage } from "../block-image.js";
 import { BlockLink } from "../block-link.js";
+import { Ticker } from "../../motion/ticker.js";
 import { siteText, useBlockIds } from "./_kit-1.js";
 /**
- * "Brands we work with" proof. Server component; the marquee is CSS keyframes (paused on
- * hover, focus and reduced motion; the duplicate copy is `aria-hidden`).
+ * "Brands we work with" proof. Server component; the marquee is the motion kit's Ticker: CSS
+ * keyframes, paused on hover, focus and with its pause control; static under reduced motion and
+ * SiteShell `motion="off"`; the duplicate copy is `aria-hidden` and `inert`).
  *
  * ```tsx
  * <LogoStrip caption="Trusted by 120+ businesses since 2014" logos={[{ name: "Kıyı", image: { src, width, height } }]} />
@@ -16,11 +18,10 @@ export function LogoStrip({ variant = "row", caption, logos, monochrome = true,
     const { base, headingId } = useBlockIds(id, "logos");
     const t = siteText(labels, locale);
     const marquee = variant === "marquee" && logos.length >= 4;
-    const logo = (l, i, hidden) => {
-        const img = (_jsxs(_Fragment, { children: [_jsx(BlockImage, { ...l.image, alt: hidden ? undefined : l.name, decorative: hidden, fit: "contain", className: cn("vb-logo", l.imageDark && "vb-logo-light"), components: components }), l.imageDark ? _jsx(BlockImage, { ...l.imageDark, decorative: true, fit: "contain", className: "vb-logo vb-logo-dark", components: components }) : null] }));
-        const inner = l.link && !hidden ? (_jsx(BlockLink, { href: l.link.href, newTab: l.link.newTab, components: components, labels: labels, locale: locale, className: "flex items-center rounded-[2px] focus-ring", children: img })) : (img);
-        return (_jsx("li", { "aria-hidden": hidden || undefined, "data-dup": hidden ? "" : undefined, className: "vb-logo-item flex shrink-0 items-center justify-center", "data-field": editMode && !hidden ? `props.logos.${i}` : undefined, children: inner }, `${hidden ? "d" : "l"}${i}`));
+    const logo = (l, i) => {
+        const img = (_jsxs(_Fragment, { children: [_jsx(BlockImage, { ...l.image, alt: l.name, fit: "contain", className: cn("vb-logo", l.imageDark && "vb-logo-light"), components: components }), l.imageDark ? _jsx(BlockImage, { ...l.imageDark, decorative: true, fit: "contain", className: "vb-logo vb-logo-dark", components: components }) : null] }));
+        return (_jsx("li", { className: "vb-logo-item flex shrink-0 items-center justify-center", "data-field": editMode ? `props.logos.${i}` : undefined, children: l.link ? (_jsx(BlockLink, { href: l.link.href, newTab: l.link.newTab, components: components, labels: labels, locale: locale, className: "flex items-center rounded-[2px] focus-ring", children: img })) : (img) }, i));
     };
     const captionEl = caption ? (_jsx("p", { id: headingId, className: cn("text-small text-fg-muted text-pretty", variant === "row" && "max-w-[26ch] shrink-0"), "data-field": editMode ? "props.caption" : undefined, children: caption })) : null;
-    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: caption ? headingId : undefined, "aria-label": caption ? undefined : t("logos"), blockId: base, blockType: "logo-strip", editMode: editMode, className: cn("vb-logos", className), "data-variant": marquee ? "marquee" : variant === "marquee" ? "row" : variant, "data-mono": monochrome ? "" : undefined, children: marquee ? (_jsxs("div", { className: "flex flex-col gap-8", children: [captionEl ? _jsx(Container, { children: captionEl }) : null, _jsx("div", { className: "vb-marquee", style: { "--vb-marquee-duration": `${speed}s` }, children: _jsxs("ul", { className: "vb-marquee-track", children: [logos.map((l, i) => logo(l, i)), logos.map((l, i) => logo(l, i, true))] }) })] })) : variant === "grid" ? (_jsxs(Container, { className: "flex flex-col gap-8", children: [captionEl, _jsx("ul", { className: cn("vb-logo-grid grid grid-cols-2 @2xl:grid-cols-3", columns === 4 && "@4xl:grid-cols-4", columns === 5 && "@4xl:grid-cols-5", columns === 6 && "@4xl:grid-cols-4 @6xl:grid-cols-6"), children: logos.map((l, i) => logo(l, i)) })] })) : (_jsxs(Container, { className: "flex flex-col gap-8 @4xl:flex-row @4xl:items-center @4xl:gap-(--gutter)", children: [captionEl, _jsx("ul", { className: "flex flex-1 flex-wrap items-center gap-x-[clamp(2rem,5cqi,4rem)] gap-y-6", children: logos.map((l, i) => logo(l, i)) })] })) }));
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: caption ? headingId : undefined, "aria-label": caption ? undefined : t("logos"), blockId: base, blockType: "logo-strip", editMode: editMode, className: cn("vb-logos", className), "data-variant": marquee ? "marquee" : variant === "marquee" ? "row" : variant, "data-mono": monochrome ? "" : undefined, children: marquee ? (_jsxs("div", { className: "flex flex-col gap-8", children: [captionEl ? _jsx(Container, { children: captionEl }) : null, _jsx(Ticker, { as: "ul", duration: speed, pauseLabel: t("pauseMotion"), className: "vb-marquee-band", "data-motion": editMode ? "off" : undefined, children: logos.map((l, i) => logo(l, i)) })] })) : variant === "grid" ? (_jsxs(Container, { className: "flex flex-col gap-8", children: [captionEl, _jsx("ul", { className: cn("vb-logo-grid grid grid-cols-2 @2xl:grid-cols-3", columns === 4 && "@4xl:grid-cols-4", columns === 5 && "@4xl:grid-cols-5", columns === 6 && "@4xl:grid-cols-4 @6xl:grid-cols-6"), children: logos.map((l, i) => logo(l, i)) })] })) : (_jsxs(Container, { className: "flex flex-col gap-8 @4xl:flex-row @4xl:items-center @4xl:gap-(--gutter)", children: [captionEl, _jsx("ul", { className: "flex flex-1 flex-wrap items-center gap-x-[clamp(2rem,5cqi,4rem)] gap-y-6", children: logos.map((l, i) => logo(l, i)) })] })) }));
 }

package/dist/blocks/site/media-text.js

@@ -7,6 +7,7 @@ import { BlockImage } from "../block-image.js";
 import { RichText } from "../rich-text.js";
 import { EmbedFacade } from "./embed-facade.js";
 import { CtaList, siteText, useBlockIds } from "./_kit-1.js";
+import { Reveal } from "../../motion/reveal.js";
 /** Embed URL for a video facade (YouTube → youtube-nocookie, Vimeo → player). */
 export function videoEmbedUrl(v) {
     if (v.provider === "youtube") {
@@ -51,5 +52,5 @@ export function MediaText({ variant = "side", eyebrow, title, body, bullets, cta
     else {
         content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: cn("@4xl:col-span-5", end && "@4xl:order-2 @4xl:col-start-8"), children: image("(min-width: 56rem) 40vw, 100vw", "rounded-ui") }), _jsx("div", { className: cn("@4xl:col-span-6", end ? "@4xl:order-1 @4xl:col-start-1" : "@4xl:col-start-7"), children: text })] }));
     }
-    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: headingId, blockId: base, blockType: "media-text", editMode: editMode, className: cn("vb-media-text", variant === "overlap" && "vb-media-overlap", className), "data-variant": variant, "data-side": mediaSide, children: _jsx("div", { className: "vb-reveal", children: content }) }));
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: headingId, blockId: base, blockType: "media-text", editMode: editMode, className: cn("vb-media-text", variant === "overlap" && "vb-media-overlap", className), "data-variant": variant, "data-side": mediaSide, children: _jsx(Reveal, { disabled: editMode, children: content }) }));
 }

package/dist/blocks/site/pricing-table.js

@@ -8,6 +8,7 @@ import { BlockLink } from "../block-link.js";
 import { RichText } from "../rich-text.js";
 import { site2Text } from "./shared/labels-2.js";
 import { fieldAttr, formatMoney, formatMoneyLong, useBlockIds2 } from "./shared/kit-2.js";
+import { Reveal, Stagger } from "../../motion/reveal.js";
 /**
  * Plan pricing for SaaS subscriptions, agency packages and retainers. Money through `Intl` per
  * locale and currency, a period suffix, a mandatory tax note. Server component; the
@@ -25,7 +26,7 @@ export function PricingTable({ variant = "columns", eyebrow, title, lead, billin
     const ctx = { t, locale, billing, components, labels, editMode };
     // One primary per block: the highlighted plan, else the first plan asking for it.
     const primaryIndex = Math.max(0, plans.findIndex((p) => p.highlight) >= 0 ? plans.findIndex((p) => p.highlight) : plans.findIndex((p) => p.cta?.style === "primary"));
-    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "pricing", editMode: editMode, className: cn("vb-pricing", className), "data-billing": billing, "data-variant": single ? "single" : variant, children: _jsxs(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: [title || eyebrow || lead || billing === "both" ? (_jsxs("div", { className: "flex flex-col gap-8 @4xl:flex-row @4xl:items-end @4xl:justify-between", children: [_jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale }), billing === "both" ? _jsx(BillingToggle, { name: `${base}-period`, defaultPeriod: defaultPeriod, saving: yearlySaving, t: t }) : null] })) : null, single ? (_jsx(SinglePlan, { plan: plans[0], ctx: ctx })) : variant === "rows" ? (_jsx("ol", { className: "flex flex-col border-b border-line", children: plans.map((plan, i) => (_jsx(PlanRow, { plan: plan, index: i, ctx: ctx, primary: i === primaryIndex }, i))) })) : (_jsx("ul", { className: "vb-plan-grid grid", "data-cols": Math.min(plans.length, 4), children: plans.map((plan, i) => (_jsx(PlanColumn, { plan: plan, index: i, ctx: ctx, primary: i === primaryIndex }, i))) })), taxNote || footnote ? (_jsxs("div", { className: "flex flex-col gap-2 border-t border-line pt-5 text-small text-fg-muted @2xl:flex-row @2xl:items-start @2xl:justify-between @2xl:gap-10", children: [taxNote ? (_jsx("p", { className: "shrink-0 font-mono text-eyebrow uppercase tracking-[0.08em]", ...fieldAttr(editMode, "taxNote"), children: taxNote })) : null, footnote ? (_jsx("div", { className: "max-w-(--measure) @2xl:text-end", ...fieldAttr(editMode, "footnote"), children: isRichDoc(footnote) ? _jsx(RichText, { doc: footnote, size: "sm", components: components, labels: labels, locale: locale }) : footnote })) : null] })) : null] }) }));
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "pricing", editMode: editMode, className: cn("vb-pricing", className), "data-billing": billing, "data-variant": single ? "single" : variant, children: _jsxs(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: [title || eyebrow || lead || billing === "both" ? (_jsxs("div", { className: "flex flex-col gap-8 @4xl:flex-row @4xl:items-end @4xl:justify-between", children: [_jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale }), billing === "both" ? _jsx(BillingToggle, { name: `${base}-period`, defaultPeriod: defaultPeriod, saving: yearlySaving, t: t }) : null] })) : null, single ? (_jsx(Reveal, { disabled: editMode, children: _jsx(SinglePlan, { plan: plans[0], ctx: ctx }) })) : variant === "rows" ? (_jsx(Stagger, { asChild: true, effect: "fade", disabled: editMode, children: _jsx("ol", { className: "flex flex-col border-b border-line", children: plans.map((plan, i) => (_jsx(PlanRow, { plan: plan, index: i, ctx: ctx, primary: i === primaryIndex }, i))) }) })) : (_jsx(Stagger, { asChild: true, disabled: editMode, children: _jsx("ul", { className: "vb-plan-grid grid", "data-cols": Math.min(plans.length, 4), children: plans.map((plan, i) => (_jsx(PlanColumn, { plan: plan, index: i, ctx: ctx, primary: i === primaryIndex }, i))) }) })), taxNote || footnote ? (_jsxs("div", { className: "flex flex-col gap-2 border-t border-line pt-5 text-small text-fg-muted @2xl:flex-row @2xl:items-start @2xl:justify-between @2xl:gap-10", children: [taxNote ? (_jsx("p", { className: "shrink-0 font-mono text-eyebrow uppercase tracking-[0.08em]", ...fieldAttr(editMode, "taxNote"), children: taxNote })) : null, footnote ? (_jsx("div", { className: "max-w-(--measure) @2xl:text-end", ...fieldAttr(editMode, "footnote"), children: isRichDoc(footnote) ? _jsx(RichText, { doc: footnote, size: "sm", components: components, labels: labels, locale: locale }) : footnote })) : null] })) : null] }) }));
 }
 const isRichDoc = (v) => !!v && typeof v === "object" && v.type === "doc" && Array.isArray(v.content);
 function BillingToggle({ name, defaultPeriod, saving, t }) {

package/dist/blocks/site/process.js

@@ -4,6 +4,7 @@ import { Container, Section } from "../section.js";
 import { SectionHeader } from "../section-header.js";
 import { BlockImage } from "../block-image.js";
 import { CtaList, indexLabel, useBlockIds } from "./_kit-1.js";
+import { Reveal } from "../../motion/reveal.js";
 /**
  * "How we work" — discovery → design → launch; a first spa visit; SaaS setup. An ordered list
  * (the order is announced; the numbers are visual). Server component.
@@ -37,5 +38,5 @@ export function Steps({ variant = "vertical", eyebrow, title, lead, steps, actio
     else {
         content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-8 @4xl:col-span-5", children: [header, actionsEl] }), _jsx("ol", { className: "vb-steps-v flex flex-col @4xl:col-span-6 @4xl:col-start-7", children: steps.map((s, i) => (_jsxs("li", { className: "vb-step relative flex flex-col gap-3 ps-12 pb-10 last:pb-0", children: [_jsx("span", { "aria-hidden": true, className: cn("vb-step-badge absolute start-0 top-0 inline-flex size-8 items-center justify-center rounded-full border border-line bg-scene font-mono text-[0.6875rem] tabular text-fg-muted", i === 0 && "vb-step-badge-first"), children: indexLabel(i) }), _jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 pt-1", children: [stepTitle(s, i), duration(s, i)] }), stepText(s, i), media(s)] }, i))) })] }));
     }
-    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "steps", editMode: editMode, className: cn("vb-steps", className), "data-variant": variant, children: _jsx("div", { className: "vb-reveal", children: content }) }));
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "steps", editMode: editMode, className: cn("vb-steps", className), "data-variant": variant, children: _jsx(Reveal, { disabled: editMode, children: content }) }));
 }

package/dist/blocks/site/site-shell.d.ts

@@ -36,6 +36,13 @@ export interface SiteShellProps extends Omit<React.HTMLAttributes<HTMLDivElement
     pageParam?: string;
     /** Query key for the locale. Default `"lang"`. */
     localeParam?: string;
+    /**
+     * Motion level for the whole site → `data-motion`. subtle (default): short fades and small
+     * rises, count-ups, the logo ticker. full: longer, wider, a wiping hero title, magnetic
+     * calls-to-action. off: final state everywhere. Reduced motion always wins. Page and
+     * language switches cross-fade (View Transitions where available, a fade otherwise).
+     */
+    motion?: "full" | "subtle" | "off";
 }
 export interface SiteShellContextValue {
     page: string;
@@ -46,6 +53,10 @@ export interface SiteShellContextValue {
     navigate: (to: SiteLocation) => void;
     /** The href for a page (respects `routing` and `pageParam`). */
     hrefFor: (page: string, anchor?: string) => string;
+    /** The shell's motion level. */
+    motion: "full" | "subtle" | "off";
+    /** True after a switch that should fade the new page in (no View Transitions available). */
+    pageEnter: boolean;
 }
 /** Page, locale and navigation of the closest Site shell. Throws outside one. */
 export declare function useSiteShell(): SiteShellContextValue;

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

@@ -5,6 +5,8 @@ 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. */
@@ -32,7 +34,7 @@ export function useSiteShell() {
  * </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", className, onClick, children, ...props }, ref) {
+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" });
@@ -47,6 +49,19 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
     }, [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]);
@@ -63,10 +78,14 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
         }
         if (pageChanged)
             pending.current = { focus: !to.anchor, scroll: true, anchor: to.anchor };
-        if (nextLocale !== locale)
-            setLocale(nextLocale);
-        if (pageChanged)
-            setPage(nextPage);
+        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.
@@ -80,7 +99,7 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
         });
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [page, locale, pageKey, localeKey, routing, homePage, homeLocale, params, setLocale, setPage]);
+    [page, locale, pageKey, localeKey, routing, homePage, homeLocale, params, setLocale, setPage, transition]);
     // URL → state on mount and on back/forward.
     React.useEffect(() => {
         if (routing === "memory")
@@ -90,12 +109,18 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
             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;
-            setLocale(nextLocale);
-            setPage((prev) => {
-                if (prev !== nextPage)
-                    pending.current = { focus: !initial && !anchor, scroll: !initial, anchor: initial ? anchor : undefined };
-                return nextPage;
-            });
+            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
@@ -167,9 +192,11 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
         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]);
+    [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;
@@ -186,7 +213,7 @@ export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDar
             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-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] }) }));
+    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, "\\$&");
@@ -198,7 +225,7 @@ function scrollToAnchor(root, anchor, instant) {
 }
 /** One inner page: rendered only while it is the shell's current page. */
 export function SiteShellPage({ id, title, children }) {
-    const { page } = useSiteShell();
+    const { page, pageEnter } = useSiteShell();
     const active = page === id;
     const first = React.useRef(true);
     React.useEffect(() => {
@@ -208,7 +235,7 @@ export function SiteShellPage({ id, title, children }) {
     }, [active, title]);
     if (!active)
         return null;
-    return (_jsx("div", { "data-site-page": id, className: "contents", children: children }));
+    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 }) {

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

@@ -31,7 +31,9 @@ export interface StatsBandProps extends Omit<BlockBaseProps, "variant" | "labels
 }
 /**
  * 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.
+ * 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" }]} />

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

@@ -3,6 +3,8 @@ 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")
@@ -12,7 +14,9 @@ function formatValue(v, locale) {
 }
 /**
  * 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.
+ * 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" }]} />
@@ -23,19 +27,19 @@ export function StatsBand({ variant = "inline", eyebrow, title, lead, body, item
     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] }));
+        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(SectionHeader, { eyebrow: eyebrow, title: title, lead: variant === "with-text" ? undefined : lead, headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale })) : 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("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))) })] }));
+        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("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))) })] }));
+        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("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))) })] }));
+        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, { className: "vb-reveal", children: content }) }));
+    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/testimonials.js

@@ -11,6 +11,7 @@ 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.
@@ -27,7 +28,7 @@ export function Testimonials({ variant: variantProp = "feature", eyebrow, title,
     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 }))] })) }) }));
+    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" };

package/dist/business/index.d.ts

@@ -9,3 +9,4 @@ export { exportToBlob, toExportMatrix, exportFilename, downloadBlob, maskValue,
 export { SetupChecklist, SetupChecklistLauncher, setupChecklistLabels, type SetupChecklistProps, type SetupChecklistLauncherProps, type SetupChecklistLabels, type SetupItem, type SetupItemStatus, } from "./setup-checklist.js";
 export { PermissionMatrix, PermissionMatrixCell, PermissionDiff, PermissionCompare, permissionMatrixLabels, type PermissionMatrixProps, type PermissionMatrixCellProps, type PermissionDiffProps, type PermissionCompareProps, type PermissionMatrixLabels, type PermissionResource, type PermissionAction, } from "./permission-matrix.js";
 export { diffPermissions, applyDependencies, effectiveLevel, scopeRank, isGranted, setMany, setPermission, SCOPE_ORDER, type PermissionScope, type PermissionLevel, type PermissionValue, type PermissionDependency, type PermissionChange, } from "./permission-core.js";
+export { SignerStatus, signerStatusLabels, type SignerStatusProps, type SignerStatusLabels, type Signer, type SignerState, } from "./signer-status.js";