@vamos-ui/react 0.3.0 → 0.4.0

package/dist/blocks/block-image.js

@@ -41,7 +41,7 @@ export function BlockImage({ src, alt, width, height, decorative, aspect, fit =
     const altText = decorative ? "" : (alt ?? "");
     const Img = components?.Image;
     const img = Img ? (_jsx(Img, { src: src, alt: altText, width: ratio ? undefined : width, height: ratio ? undefined : height, fill: ratio ? true : undefined, sizes: sizes, priority: priority, className: imgClassName })) : (_jsx("img", { src: src, alt: altText, width: width, height: height, sizes: sizes, loading: priority ? "eager" : "lazy", decoding: priority ? "sync" : "async", fetchPriority: priority ? "high" : undefined, className: imgClassName }));
-    const frame = (_jsx("span", { "data-ratio": ratio ? "" : undefined, className: cn("vb-image", !ratio && "h-auto", caption ? undefined : className), style: frameStyle, ...(caption ? null : fieldAttr), children: img }));
+    const frame = (_jsx("span", { "data-ratio": ratio ? "" : undefined, className: cn("vb-image", caption ? undefined : className), style: frameStyle, ...(caption ? null : fieldAttr), children: img }));
     if (!caption)
         return frame;
     return (_jsxs("figure", { className: cn("vb-figure", className), ...fieldAttr, children: [frame, _jsx("figcaption", { className: "text-small text-fg-muted", children: caption })] }));

package/dist/blocks/block-link.js

@@ -16,7 +16,7 @@ import { isExternalUrl, sanitizeHref } from "./schema/safety.js";
  */
 export const BlockLink = React.forwardRef(function BlockLink({ href, newTab, appearance, size = "lg", components, labels, locale, field, editMode, className, children, rel, target, ...props }, ref) {
     const safe = sanitizeHref(href);
-    const classes = cn(appearance === "link" ? "inline-flex items-center gap-1.5 font-medium text-fg underline decoration-line underline-offset-[0.3em] transition-colors hover:decoration-current focus-ring rounded-[2px]" : null, appearance && appearance !== "link" ? cn(buttonVariants({ variant: appearance, size }), appearance === "primary" && "vb-action-primary", appearance === "secondary" && "vb-action-secondary") : null, className);
+    const classes = cn(appearance === "link" ? "inline-flex min-h-6 pointer-coarse:min-h-11 items-center gap-1.5 font-medium text-fg underline decoration-line underline-offset-[0.3em] transition-colors hover:decoration-current focus-ring rounded-[2px]" : null, appearance && appearance !== "link" ? cn(buttonVariants({ variant: appearance, size }), appearance === "primary" && "vb-action-primary", appearance === "secondary" && "vb-action-secondary") : null, className);
     const fieldAttr = editMode && field ? { "data-field": field } : undefined;
     if (!safe) {
         if (process.env.NODE_ENV !== "production")

package/dist/blocks/index.d.ts

@@ -35,14 +35,14 @@ export { BlogList, BlogListSkeleton, type BlogListProps, type BlogListVariant, t
 export { ArticleLayout, shareUrl, type ArticleLayoutProps, type ArticleVariant, type ArticlePost, type ArticleAuthor, type ShareTarget } from "./site/article-layout.js";
 export { ContactForm, type ContactFormProps, type ContactFormVariant, type ContactInfo } from "./site/contact-form.js";
 export { MapHours, HoursTable, directionsUrl, mapEmbedUrl, localBusinessJsonLd, type MapHoursProps, type MapHoursVariant, type Branch, type DirectionsProvider, type BusinessType, type HoursDisplay } from "./site/map-hours.js";
-export { MenuList, menuJsonLd, ALLERGENS, type MenuListProps, type MenuVariant, type MenuCategory, type MenuItem, type MenuPrice, type MenuTag, type Allergen } from "./site/menu-list.js";
+export { MenuList, menuJsonLd, ALLERGENS, MENU_TAGS, type MenuListProps, type MenuVariant, type MenuCategory, type MenuItem, type MenuPrice, type MenuTag, type Allergen } from "./site/menu-list.js";
 export { GallerySection, type GallerySectionProps, type GalleryVariant, type GalleryImage, type GallerySpan } from "./site/gallery-section.js";
 export { ConsentBanner, ConsentDefaults, type ConsentBannerProps, type ConsentVariant } from "./site/consent-banner.js";
 export { ContactDock, type ContactDockProps, type ContactDockVariant, type DockAction, type MessagingProvider } from "./site/contact-dock.js";
 export { EmbedFacade, type EmbedFacadeProps } from "./site/embed-facade.js";
 export { Footer, type FooterProps, type FooterVariant } from "./site/footer.js";
 export { NotFound, type NotFoundProps, type NotFoundVariant, type NotFoundKind } from "./site/not-found.js";
-export { isOpenAt, hoursStatus, hoursOn, weekRows, summarizeHours, orderedWeek, weekStartOf, weekdayName, formatTime, formatRange, zonedMoment, openingHoursJsonLd, describeStatus, type OpenStatus, type OpenState, type WeekRow, type DayHours, type ZonedMoment, type Weekday, type TimeRange } from "./site/shared/opening-hours.js";
+export { isOpenAt, hoursStatus, hoursOn, weekRows, summarizeHours, orderedWeek, weekStartOf, weekdayName, formatTime, formatRange, zonedMoment, openingHoursJsonLd, describeStatus, timeVars, type OpenStatus, type OpenState, type WeekRow, type DayHours, type ZonedMoment, type Weekday, type TimeRange } from "./site/shared/opening-hours.js";
 export { OpenNow, type OpenNowProps } from "./site/shared/open-now.js";
 export { ConsentGate, type ConsentGateProps } from "./site/shared/consent-gate.js";
 export { ConsentSettingsButton } from "./site/shared/consent-island.js";

package/dist/blocks/index.js

@@ -37,7 +37,7 @@ export { BlogList, BlogListSkeleton } from "./site/blog-list.js";
 export { ArticleLayout, shareUrl } from "./site/article-layout.js";
 export { ContactForm } from "./site/contact-form.js";
 export { MapHours, HoursTable, directionsUrl, mapEmbedUrl, localBusinessJsonLd } from "./site/map-hours.js";
-export { MenuList, menuJsonLd, ALLERGENS } from "./site/menu-list.js";
+export { MenuList, menuJsonLd, ALLERGENS, MENU_TAGS } from "./site/menu-list.js";
 export { GallerySection } from "./site/gallery-section.js";
 export { ConsentBanner, ConsentDefaults } from "./site/consent-banner.js";
 export { ContactDock } from "./site/contact-dock.js";
@@ -45,7 +45,7 @@ export { EmbedFacade } from "./site/embed-facade.js";
 export { Footer } from "./site/footer.js";
 export { NotFound } from "./site/not-found.js";
 // Shared modules: opening hours, consent, form contract, brand marks, labels
-export { isOpenAt, hoursStatus, hoursOn, weekRows, summarizeHours, orderedWeek, weekStartOf, weekdayName, formatTime, formatRange, zonedMoment, openingHoursJsonLd, describeStatus } from "./site/shared/opening-hours.js";
+export { isOpenAt, hoursStatus, hoursOn, weekRows, summarizeHours, orderedWeek, weekStartOf, weekdayName, formatTime, formatRange, zonedMoment, openingHoursJsonLd, describeStatus, timeVars } from "./site/shared/opening-hours.js";
 export { OpenNow } from "./site/shared/open-now.js";
 export { ConsentGate } from "./site/shared/consent-gate.js";
 export { ConsentSettingsButton } from "./site/shared/consent-island.js";

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

@@ -126,7 +126,7 @@ export function CtaList({ actions, components, labels, locale, size = "lg", forc
                     style = "secondary";
                 primarySeen = true;
             }
-            return (_jsxs(BlockLink, { href: a.link.href, newTab: a.link.newTab, appearance: style, size: size, components: components, labels: labels, locale: locale, editMode: editMode, field: `props.actions.${i}`, "data-track": a.link.kind, children: [a.link.label, style === "link" && arrow ? _jsx(ArrowEnd, {}) : null] }, `${a.link.href}-${i}`));
+            return (_jsxs(BlockLink, { href: a.link.href, newTab: a.link.newTab, appearance: style, size: size, components: components, labels: labels, locale: locale, editMode: editMode, field: `props.actions.${i}`, "data-track": a.link.kind, className: style === "link" ? "min-h-6 pointer-coarse:min-h-11" : undefined, children: [a.link.label, style === "link" && arrow ? _jsx(ArrowEnd, {}) : null] }, `${a.link.href}-${i}`));
         }) }));
 }
 /** Logical "→" that mirrors in RTL. Decorative. */

package/dist/blocks/site/announcement-bar.js

@@ -33,6 +33,6 @@ export function AnnouncementBar({ variant = "inline", text, link, tone = "neutra
         return null;
     const cookie = storageKey ?? `vb_ann_${hash(textOf(text) + textOf(link?.label))}`;
     const centered = variant === "centered";
-    const linkEl = link ? (_jsxs(BlockLink, { href: link.href, newTab: link.newTab, components: components, labels: labels, locale: locale, editMode: editMode, field: "props.link", className: "group/ann inline-flex shrink-0 items-center gap-1.5 font-medium underline decoration-current/40 underline-offset-[0.28em] transition-[text-decoration-color] hover:decoration-current focus-ring rounded-[2px]", children: [link.label, _jsx(ArrowEnd, { className: "group-hover/ann:translate-x-0.5 rtl:group-hover/ann:-translate-x-0.5" })] })) : null;
+    const linkEl = link ? (_jsxs(BlockLink, { href: link.href, newTab: link.newTab, components: components, labels: labels, locale: locale, editMode: editMode, field: "props.link", className: "group/ann inline-flex min-h-6 shrink-0 items-center gap-1.5 font-medium underline decoration-current/40 underline-offset-[0.28em] transition-[text-decoration-color] hover:decoration-current focus-ring rounded-[2px]", children: [link.label, _jsx(ArrowEnd, { className: "group-hover/ann:translate-x-0.5 rtl:group-hover/ann:-translate-x-0.5" })] })) : null;
     return (_jsx("div", { role: "region", "aria-label": t("announcement"), id: anchor, "data-announcement": "", "data-variant": variant, "data-tone": tone, "data-block-id": editMode ? id : undefined, "data-hidden": editMode && outside ? "" : undefined, className: cn("vb-announcement relative text-small", toneClass[tone], className), children: _jsxs("div", { className: cn("vb-container flex min-h-9 items-center gap-3 py-1.5", centered && "justify-center text-center"), children: [_jsxs("p", { className: cn("flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-0.5", centered ? "justify-center" : "flex-1"), children: [centered ? (_jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] after:ms-3 after:inline-block after:h-[0.7em] after:w-px after:bg-current after:align-[-0.05em] after:opacity-40 after:content-['']", ...field(editMode, "label"), children: label ?? t("notice") })) : null, _jsx("span", { className: "text-pretty", ...field(editMode, "text"), children: text }), linkEl] }), dismissible ? (_jsx(AnnouncementDismiss, { cookie: cookie, label: t("dismiss"), className: centered ? "absolute end-[max(var(--gutter),0.5rem)] top-1/2 -translate-y-1/2" : undefined })) : null] }) }));
 }

package/dist/blocks/site/article-layout.d.ts

@@ -18,6 +18,7 @@ export interface ArticlePost {
     /** Standfirst under the title. */
     dek?: React.ReactNode;
     body: RichDoc;
+    /** Cover. `sizes`: wide `100vw`, contained `(min-width: 76rem) 76rem, 100vw`. Above the fold: `priority`. */
     cover?: SiteImage2;
     coverCaption?: React.ReactNode;
     author?: ArticleAuthor;

package/dist/blocks/site/article-layout.js

@@ -14,6 +14,7 @@ import { BrandIcon } from "./shared/brand-icons.js";
 import { CopyLinkButton } from "./shared/copy-link.js";
 import { shareLabelKeys } from "./shared/island-keys.js";
 import { BlogList } from "./blog-list.js";
+import { headingLines } from "./shared/heading-lines.js";
 /** Gives every h2/h3 a unique, locale-aware anchor and collects the h2s for the TOC. */
 function withAnchors(doc, locale) {
     const used = new Set();
@@ -50,7 +51,7 @@ export function ArticleLayout({ variant = "classic", post, toc: showToc = true,
     const minutes = post.readingMinutes ?? readingMinutes(countWords(richToText(post.body)));
     const ctx = { t, locale, components, labels };
     const cover = variant !== "minimal" && post.cover?.src ? post.cover : undefined;
-    const header = (_jsxs("header", { className: cn("flex flex-col gap-6", variant === "wide-cover" && "pt-4"), children: [post.breadcrumb?.length ? _jsx(Breadcrumb, { trail: post.breadcrumb, current: post.title, ctx: ctx }) : null, variant === "minimal" ? (_jsx("p", { className: "font-mono text-eyebrow tabular uppercase tracking-[0.08em] text-fg-muted", children: _jsx("time", { dateTime: isoDay(post.publishedAt), children: formatDate2(isoDay(post.publishedAt), locale) }) })) : post.category ? (_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em]", children: _jsx(BlockLink, { href: post.category.href, components: components, labels: labels, locale: locale, className: "text-accent-ink hover:underline underline-offset-[0.25em] focus-ring rounded-[2px]", children: post.category.label }) })) : null, _jsx(BlockHeading, { id: headingId, level: headingLevel, size: variant === "minimal" ? "display-xl" : "display-l", text: post.title, editMode: editMode, field: "props.post.title", labels: labels, locale: locale, className: "max-w-[22ch]" }), post.dek ? _jsx("p", { className: "max-w-[58ch] text-lead text-fg-muted text-pretty", children: post.dek }) : null, _jsx(Byline, { post: post, minutes: minutes, ctx: ctx, showDate: variant !== "minimal" })] }));
+    const header = (_jsxs("header", { className: cn("flex flex-col gap-6", variant === "wide-cover" && "pt-4"), children: [post.breadcrumb?.length ? _jsx(Breadcrumb, { trail: post.breadcrumb, current: post.title, ctx: ctx }) : null, variant === "minimal" ? (_jsx("p", { className: "font-mono text-eyebrow tabular uppercase tracking-[0.08em] text-fg-muted", children: _jsx("time", { dateTime: isoDay(post.publishedAt), children: formatDate2(isoDay(post.publishedAt), locale) }) })) : post.category ? (_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em]", children: _jsx(BlockLink, { href: post.category.href, components: components, labels: labels, locale: locale, className: "text-accent-ink hover:underline underline-offset-[0.25em] focus-ring rounded-[2px]", children: post.category.label }) })) : null, _jsx(BlockHeading, { id: headingId, level: headingLevel, size: variant === "minimal" ? "display-xl" : "display-l", text: headingLines(post.title), editMode: editMode, field: "props.post.title", labels: labels, locale: locale, className: "max-w-[22ch]" }), post.dek ? _jsx("p", { className: "max-w-[58ch] text-lead text-fg-muted text-pretty", children: post.dek }) : null, _jsx(Byline, { post: post, minutes: minutes, ctx: ctx, showDate: variant !== "minimal" })] }));
     const tocNav = tocVisible ? (_jsxs("nav", { "aria-label": t("onThisPage"), className: cn("vb-toc", variant === "wide-cover" ? "border-y border-line py-4" : "flex flex-col gap-3"), children: [_jsx("p", { className: cn("font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", variant === "wide-cover" && "sr-only"), children: t("onThisPage") }), _jsx("ol", { className: cn("text-small", variant === "wide-cover" ? "flex flex-wrap gap-x-6 gap-y-2" : "flex flex-col gap-2 border-s border-line"), children: toc.map((e) => (_jsx("li", { children: _jsx("a", { href: `#${e.id}`, className: cn("vb-toc-link block text-fg-muted transition-colors hover:text-fg focus-ring rounded-[2px]", variant !== "wide-cover" && "-ms-px border-s border-transparent ps-4 hover:border-fg"), children: e.text }) }, e.id))) })] })) : null;
     const body = _jsx(RichText, { doc: doc, size: "lg", components: components, labels: labels, locale: locale, className: "vb-article-body", editMode: editMode, field: "props.post.body" });
     return (_jsxs(_Fragment, { children: [draft ? (_jsxs("p", { role: "note", className: "vb-draft-strip sticky top-0 z-20 px-4 py-2 text-center text-small text-fg", children: [_jsx("span", { className: "me-2 font-mono text-eyebrow uppercase tracking-[0.08em]", children: t("preview") }), t("previewNotice")] })) : null, _jsxs(Section, { as: "article", theme: theme, anchor: anchor, headingId: headingId, blockId: id, blockType: "article", editMode: editMode, className: cn("vb-article", className), "data-variant": variant, children: [variant === "wide-cover" && cover ? (_jsx("div", { className: "vb-article-cover -mt-[calc(var(--section-y)*var(--vb-rhythm))] mb-12 @4xl:mb-16", children: _jsx(BlockImage, { ...cover, alt: cover.alt ?? "", decorative: !cover.alt, aspect: "21:9", priority: true, sizes: "100vw", components: components, caption: post.coverCaption ? _jsx("span", { className: "vb-container block", children: post.coverCaption }) : undefined }) })) : null, _jsxs(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: [_jsx("div", { className: cn(variant === "classic" ? "@4xl:grid @4xl:grid-cols-12 @4xl:gap-x-(--gutter)" : "mx-auto w-full max-w-(--prose)", variant === "wide-cover" && "max-w-[58rem]"), children: _jsx("div", { className: cn(variant === "classic" && "@4xl:col-span-9"), children: header }) }), variant === "classic" && cover ? (_jsx(BlockImage, { ...cover, alt: cover.alt ?? "", decorative: !cover.alt, aspect: "3:2", priority: true, sizes: "(min-width: 76rem) 76rem, 100vw", className: "vb-article-cover rounded-ui", components: components, caption: post.coverCaption })) : null, variant === "wide-cover" && tocNav ? _jsx("div", { className: "mx-auto w-full max-w-[58rem]", children: tocNav }) : null, _jsxs("div", { className: cn(variant === "classic" ? "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12" : "mx-auto w-full max-w-(--prose)"), children: [variant === "classic" && tocNav ? (_jsx("aside", { className: "@4xl:col-span-3 @4xl:col-start-10 @4xl:row-start-1", children: _jsx("div", { className: "@4xl:sticky @4xl:top-[calc(var(--topbar-h,0px)+2rem)]", children: tocNav }) })) : null, _jsxs("div", { className: cn("flex min-w-0 flex-col gap-12", variant === "classic" && "@4xl:col-span-8 @4xl:row-start-1 @6xl:col-span-7"), children: [body, _jsx(ArticleFooter, { post: post, share: share, url: url, ctx: ctx })] })] })] })] }), related?.length ? _jsx(BlogList, { variant: "compact", title: t("relatedPosts"), posts: related, postHeadingLevel: 3, theme: { rhythm: "tight" }, components: components, labels: labels, locale: locale }) : null, cta] }));

package/dist/blocks/site/blog-list.d.ts

@@ -8,6 +8,7 @@ export interface PostSummary {
     href: string;
     title: string;
     excerpt?: string;
+    /** 3:2 cover. `sizes`: featured `(min-width: 56rem) min(59vw, 45rem), 100vw`; grid `min(34vw, 26rem)` / `min(50vw, 38rem)` / 100vw. */
     cover?: SiteImage2;
     category?: {
         label: string;

package/dist/blocks/site/blog-list.js

@@ -7,6 +7,7 @@ import { BlockImage } from "../block-image.js";
 import { BlockLink } from "../block-link.js";
 import { site2Text } from "./shared/labels-2.js";
 import { fieldAttr, formatDate2, isoDay, useBlockIds2 } from "./shared/kit-2.js";
+import { columnSizes } from "./shared/image-sizes.js";
 /**
  * Latest posts and category archives. Receives posts as data (`PostSummary`); fetching is the
  * app's job (or the renderer's `resolvers.posts`). Each post is an `article` with one link on the
@@ -48,13 +49,13 @@ function Cover({ post, ctx, sizes, priority, className }) {
 }
 function Editorial({ posts, ctx }) {
     const [first, ...rest] = posts;
-    return (_jsxs("div", { className: "flex flex-col gap-12", children: [_jsxs("article", { className: "vb-post group/post relative grid gap-x-(--gutter) gap-y-6 @4xl:grid-cols-12 @4xl:items-end", children: [ctx.covers && first.cover ? (_jsx("div", { className: "@4xl:col-span-7", children: _jsx(Cover, { post: first, ctx: ctx, sizes: "(min-width: 56rem) 58vw, 100vw" }) })) : null, _jsxs("div", { className: cn("flex flex-col gap-4", ctx.covers && first.cover ? "@4xl:col-span-5" : "@4xl:col-span-9"), children: [_jsx(Category, { post: first }), _jsx(PostTitle, { post: first, ctx: ctx, className: "font-display text-display-m" }), first.excerpt ? _jsx("p", { className: "max-w-[52ch] text-fg-muted text-pretty", children: first.excerpt }) : null, _jsx(Meta, { post: first, ctx: ctx })] })] }), rest.length ? (_jsx("ul", { className: "grid gap-x-(--gutter) @2xl:grid-cols-2", children: rest.map((p, i) => (_jsx("li", { className: "border-t border-line", children: _jsxs("article", { className: "vb-post group/post relative flex flex-col gap-2 py-6", children: [_jsx(PostDate, { post: p, ctx: ctx }), _jsx(PostTitle, { post: p, ctx: ctx, className: "text-h3 font-semibold tracking-[-0.012em]" }), p.category ? _jsx("p", { className: "text-small text-fg-muted", children: p.category.label }) : null] }) }, p.href + i))) })) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-12", children: [_jsxs("article", { className: "vb-post group/post relative grid gap-x-(--gutter) gap-y-6 @4xl:grid-cols-12 @4xl:items-end", children: [ctx.covers && first.cover ? (_jsx("div", { className: "@4xl:col-span-7", children: _jsx(Cover, { post: first, ctx: ctx, sizes: columnSizes(7 / 12) }) })) : null, _jsxs("div", { className: cn("flex flex-col gap-4", ctx.covers && first.cover ? "@4xl:col-span-5" : "@4xl:col-span-9"), children: [_jsx(Category, { post: first }), _jsx(PostTitle, { post: first, ctx: ctx, className: "font-display text-display-m" }), first.excerpt ? _jsx("p", { className: "max-w-[52ch] text-fg-muted text-pretty", children: first.excerpt }) : null, _jsx(Meta, { post: first, ctx: ctx })] })] }), rest.length ? (_jsx("ul", { className: "grid gap-x-(--gutter) @2xl:grid-cols-2", children: rest.map((p, i) => (_jsx("li", { className: "border-t border-line", children: _jsxs("article", { className: "vb-post group/post relative flex flex-col gap-2 py-6", children: [_jsx(PostDate, { post: p, ctx: ctx }), _jsx(PostTitle, { post: p, ctx: ctx, className: "text-h3 font-semibold tracking-[-0.012em]" }), p.category ? _jsx("p", { className: "text-small text-fg-muted", children: p.category.label }) : null] }) }, p.href + i))) })) : null] }));
 }
 function ListPost({ post, ctx }) {
     return (_jsxs("article", { className: "vb-post group/post relative grid gap-x-(--gutter) gap-y-2 py-6 @2xl:grid-cols-12 @2xl:items-baseline", children: [_jsx(PostDate, { post: post, ctx: ctx, className: "@2xl:col-span-2" }), _jsxs("div", { className: "flex flex-col gap-1.5 @2xl:col-span-8", children: [_jsx(PostTitle, { post: post, ctx: ctx, className: "text-h3 font-semibold tracking-[-0.012em]" }), post.excerpt ? _jsx("p", { className: "line-clamp-1 text-small text-fg-muted", children: post.excerpt }) : null] }), _jsx("p", { className: "text-small text-fg-muted @2xl:col-span-2 @2xl:text-end", children: post.readingMinutes ? ctx.t("minRead", { count: post.readingMinutes }) : null })] }));
 }
 function GridPost({ post, ctx }) {
-    return (_jsxs("article", { className: "vb-post group/post relative flex flex-col gap-4", children: [ctx.covers ? post.cover ? _jsx(Cover, { post: post, ctx: ctx, sizes: "(min-width: 56rem) 33vw, (min-width: 42rem) 50vw, 100vw" }) : _jsx("span", { "aria-hidden": true, className: "block aspect-[3/2] rounded-ui bg-surface-2" }) : null, _jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx(Category, { post: post }), _jsx(PostTitle, { post: post, ctx: ctx, className: "text-h3 font-semibold tracking-[-0.012em]" }), _jsx(Meta, { post: post, ctx: ctx })] })] }));
+    return (_jsxs("article", { className: "vb-post group/post relative flex flex-col gap-4", children: [ctx.covers ? post.cover ? _jsx(Cover, { post: post, ctx: ctx, sizes: `(min-width: 56rem) min(34vw, 26rem), ${columnSizes(1 / 2, { from: "42rem" })}` }) : _jsx("span", { "aria-hidden": true, className: "block aspect-[3/2] rounded-ui bg-surface-2" }) : null, _jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx(Category, { post: post }), _jsx(PostTitle, { post: post, ctx: ctx, className: "text-h3 font-semibold tracking-[-0.012em]" }), _jsx(Meta, { post: post, ctx: ctx })] })] }));
 }
 function CompactPost({ post, ctx }) {
     return (_jsxs("article", { className: "vb-post group/post relative flex flex-col gap-1 py-4", children: [_jsx(PostTitle, { post: post, ctx: ctx, className: "text-body font-medium" }), _jsx(PostDate, { post: post, ctx: ctx })] }));

package/dist/blocks/site/contact-dock.js

@@ -6,6 +6,7 @@ import { telHref } from "./shared/kit-2.js";
 import { BrandIcon, BRAND_NAMES, waLink } from "./shared/brand-icons.js";
 import { DockHours } from "./shared/dock-hours.js";
 import { DockAvoid } from "./shared/dock-avoid.js";
+import { nameWithLabel } from "./shared/tap.js";
 function actionSpec(a, p, t) {
     const iconClass = "size-5";
     switch (a) {
@@ -49,7 +50,8 @@ export function ContactDock(props) {
     const defaultActions = ["call", "whatsapp", "directions", "booking", "email"];
     const actions = (props.actions ?? defaultActions).map((a) => [a, actionSpec(a, props, t)]).filter((x) => !!x[1]).slice(0, 4);
     const showFab = variant !== "bar" && href;
+    const fabLabel = label ?? t("messageUs");
     const showBar = variant !== "fab" && actions.length >= 2;
     const hoursIsland = hours && offHours !== "show" ? _jsx(DockHours, { hours: hours, mode: offHours, text: t("offHours"), now: now, className: "vb-dock-offhours" }) : null;
-    return (_jsxs("div", { "data-contact-dock": "", "data-variant": variant, "data-position": position, "data-contained": contained ? "" : undefined, "data-block-id": editMode ? id : undefined, className: cn("vb-dock", className), children: [showFab ? (_jsxs("div", { className: cn("vb-dock-fab", variant === "both" && "vb-dock-desktop", position === "start" && "flex-row-reverse"), children: [hoursIsland ? _jsx("span", { className: "vb-dock-note surface-popover max-w-[16rem] rounded-ui px-3 py-2 text-xs text-fg empty:hidden [&:has(>span:empty)]:hidden", children: hoursIsland }) : null, _jsx("span", { "aria-hidden": true, className: "vb-dock-label surface-popover rounded-full px-3.5 py-2 text-sm font-medium text-fg", children: label ?? t("messageUs") }), _jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", "data-track": provider, "aria-label": `${t("messageUsOn", { network })}, ${t("opensInNewTab").replace(/[()]/g, "")}`, className: "vb-dock-button inline-flex size-[52px] shrink-0 items-center justify-center rounded-full bg-fg text-scene transition-opacity hover:opacity-90 focus-ring", children: _jsx(BrandIcon, { name: provider, className: "size-6" }) })] })) : null, showBar ? (_jsxs("nav", { "aria-label": t("contactActions"), className: cn("vb-dock-bar surface-bar border-t border-line", variant === "both" && "vb-dock-mobile"), children: [hoursIsland && !showFab ? _jsx("p", { className: "px-4 pt-2 text-center text-xs text-fg-muted empty:hidden", children: hoursIsland }) : null, _jsx("ul", { className: "grid", style: { gridTemplateColumns: `repeat(${actions.length}, minmax(0, 1fr))` }, children: actions.map(([a, s]) => (_jsx("li", { children: _jsxs("a", { href: s.href, target: s.external ? "_blank" : undefined, rel: s.external ? "noopener noreferrer" : undefined, "data-track": a, "aria-label": s.aria, className: "flex h-14 flex-col items-center justify-center gap-1 text-[11px] font-medium text-fg transition-colors hover:bg-hover focus-ring", children: [s.icon, _jsx("span", { "aria-hidden": true, children: s.label })] }) }, a))) })] })) : null, !contained && (showFab || showBar) ? _jsx(DockAvoid, {}) : null] }));
+    return (_jsxs("div", { "data-contact-dock": "", "data-variant": variant, "data-position": position, "data-contained": contained ? "" : undefined, "data-block-id": editMode ? id : undefined, className: cn("vb-dock", className), children: [showFab ? (_jsxs("div", { className: cn("vb-dock-fab", variant === "both" && "vb-dock-desktop", position === "start" && "flex-row-reverse"), children: [hoursIsland ? _jsx("span", { className: "vb-dock-note surface-popover max-w-[16rem] rounded-ui px-3 py-2 text-xs text-fg empty:hidden [&:has(>span:empty)]:hidden", children: hoursIsland }) : null, _jsx("span", { "aria-hidden": true, className: "vb-dock-label surface-popover rounded-full px-3.5 py-2 text-sm font-medium text-fg", children: fabLabel }), _jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", "data-track": provider, "aria-label": nameWithLabel(fabLabel, `${t("messageUsOn", { network })}, ${t("opensInNewTab").replace(/[()]/g, "")}`), className: "vb-dock-button inline-flex size-[52px] shrink-0 items-center justify-center rounded-full bg-fg text-scene transition-opacity hover:opacity-90 focus-ring", children: _jsx(BrandIcon, { name: provider, className: "size-6" }) })] })) : null, showBar ? (_jsxs("nav", { "aria-label": t("contactActions"), className: cn("vb-dock-bar surface-bar border-t border-line", variant === "both" && "vb-dock-mobile"), children: [hoursIsland && !showFab ? _jsx("p", { className: "px-4 pt-2 text-center text-xs text-fg-muted empty:hidden", children: hoursIsland }) : null, _jsx("ul", { className: "grid", style: { gridTemplateColumns: `repeat(${actions.length}, minmax(0, 1fr))` }, children: actions.map(([a, s]) => (_jsx("li", { children: _jsxs("a", { href: s.href, target: s.external ? "_blank" : undefined, rel: s.external ? "noopener noreferrer" : undefined, "data-track": a, "aria-label": nameWithLabel(s.label, s.aria), className: "flex h-14 flex-col items-center justify-center gap-1 text-[11px] font-medium text-fg transition-colors hover:bg-hover focus-ring", children: [s.icon, _jsx("span", { "aria-hidden": true, children: s.label })] }) }, a))) })] })) : null, !contained && (showFab || showBar) ? _jsx(DockAvoid, {}) : null] }));
 }

package/dist/blocks/site/contact-form.js

@@ -40,6 +40,6 @@ export function ContactForm({ variant = "split", eyebrow, title, lead, fields =
 }
 function InfoList({ info, t, locale, editMode }) {
     const hours = typeof info.hours === "object" ? summarizeHours(info.hours, locale) : undefined;
-    const linkClass = "text-fg underline decoration-line underline-offset-[0.25em] transition-colors hover:decoration-current focus-ring rounded-[2px]";
+    const linkClass = "inline-flex min-h-6 items-center text-fg underline decoration-line underline-offset-[0.25em] transition-colors hover:decoration-current focus-ring rounded-[2px]";
     return (_jsxs("dl", { className: "flex flex-col border-t border-line", children: [info.phone ? (_jsxs("div", { className: "flex flex-col gap-2 border-b border-line py-5", children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("phone") }), _jsx("dd", { ...fieldAttr(editMode, "info.phone"), children: _jsx("a", { href: telHref(info.phone), className: "font-display text-display-m tabular text-fg transition-colors hover:text-accent-ink focus-ring rounded-[2px]", "data-track": "call", children: prettyPhone(info.phone) }) })] })) : null, info.email ? (_jsxs("div", { className: "flex flex-col gap-2 border-b border-line py-5", children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("email") }), _jsx("dd", { children: _jsx("a", { href: `mailto:${info.email}`, className: cn(linkClass, "text-lead"), "data-track": "email", children: info.email }) })] })) : null, info.address ? (_jsxs("div", { className: "flex flex-col gap-2 border-b border-line py-5", children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("address") }), _jsx("dd", { className: "not-italic text-fg", children: _jsx("address", { className: "not-italic", children: (typeof info.address === "string" ? info.address.split("\n") : addressLines(info.address, { locale })).map((l, i) => (_jsx("span", { className: "block", children: l }, i))) }) })] })) : null, info.hours ? (_jsxs("div", { className: "flex flex-col gap-2 border-b border-line py-5", children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("hours") }), _jsx("dd", { className: "text-fg", children: hours ? (_jsx("ul", { className: "flex flex-col gap-1", children: hours.map((h, i) => (_jsxs("li", { className: "flex justify-between gap-6 tabular", children: [_jsx("span", { children: h.days }), _jsx("span", { className: h.closed ? "text-fg-subtle" : undefined, children: h.closed ? t("closedDay") : h.text })] }, i))) })) : info.hours })] })) : null] }));
 }

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

@@ -22,7 +22,7 @@ export interface CtaBookingConfig {
     timeZone?: string;
     /** "Hi, I'd like a table for {guests} on {date} at {time}." */
     messageTemplate?: string;
-    /** embed: preview image shown before the calendar loads. */
+    /** embed: preview image shown before the calendar loads. `sizes`: `min(100vw, 76rem)`. */
     preview?: SiteImage;
 }
 export interface CtaProps extends Omit<BlockBaseProps, "variant" | "labels"> {
@@ -39,7 +39,7 @@ export interface CtaProps extends Omit<BlockBaseProps, "variant" | "labels"> {
     lead?: React.ReactNode;
     /** ≤ 2; one primary. In `minimal` only the first is used, as a large text link. */
     actions?: SiteCta[];
-    /** split: the photo. */
+    /** split: the photo. `sizes`: `(min-width: 56rem) min(42vw, 32rem), 100vw`. */
     media?: SiteImage;
     /** band/split: mono contact line ("0216 000 00 00 · WhatsApp"). */
     contact?: {

package/dist/blocks/site/cta.js

@@ -11,6 +11,8 @@ 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";
+import { headingLines } from "./shared/heading-lines.js";
+import { columnSizes, SITE_SIZES } from "./shared/image-sizes.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, "")}`;
@@ -32,7 +34,7 @@ export function Cta(props) {
     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 });
+    return _jsx(BlockHeading, { id: p.headingId, level: p.headingLevel ?? 2, size: size, text: headingLines(p.title), editMode: p.editMode, field: "props.title", labels: p.labels, locale: p.locale, className: className });
 }
 function Eyebrow({ p, className }) {
     if (!p.eyebrow)
@@ -54,7 +56,7 @@ function ContactLine({ p, className }) {
     if (!c?.phone && !c?.whatsapp)
         return null;
     const t = siteText(p.labels, p.locale);
-    const linkCls = "rounded-[2px] underline decoration-current/30 underline-offset-4 transition-[text-decoration-color] hover:decoration-current focus-ring";
+    const linkCls = "inline-flex min-h-6 items-center pointer-coarse:min-h-11 rounded-[2px] underline decoration-current/30 underline-offset-4 transition-[text-decoration-color] hover:decoration-current focus-ring";
     return (_jsxs("p", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-small tabular text-fg-muted", className), ...field(p.editMode, "contact"), children: [c.phone ? (_jsx("a", { href: `tel:${c.phone}`, "data-track": "call", className: linkCls, children: formatSitePhone(c.phone, p.locale) })) : null, c.phone && c.whatsapp ? _jsx("span", { "aria-hidden": true, children: "\u00B7" }) : null, c.whatsapp ? (_jsxs("a", { href: waLink(c.whatsapp, c.whatsappText), target: "_blank", rel: "noopener noreferrer", "data-track": "whatsapp", className: linkCls, children: ["WhatsApp", _jsxs("span", { className: "sr-only", children: [" ", t("opensWhatsApp")] })] })) : null] }));
 }
 const actionsOf = (p, extra) => _jsx(CtaList, { actions: p.actions, components: p.components, labels: p.labels, locale: p.locale, editMode: p.editMode, ...extra });
@@ -64,7 +66,7 @@ function Band(p) {
 }
 /* split ----------------------------------------------------------------- */
 function Split(p) {
-    return (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-stretch", children: [_jsxs("div", { className: "flex flex-col justify-between gap-10 @4xl:col-span-6 @4xl:py-4", children: [_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(Eyebrow, { p: p }), _jsx(Heading, { p: p }), _jsx(Lead, { p: p })] }), _jsxs("div", { className: "flex flex-col gap-5", children: [actionsOf(p), _jsx(ContactLine, { p: p }), _jsx(Fineprint, { p: p })] })] }), p.media ? (_jsx("div", { className: "@4xl:col-span-5 @4xl:col-start-8", children: _jsx(BlockImage, { ...p.media, aspect: "4:5", sizes: "(min-width: 56rem) 40vw, 100vw", className: "h-full rounded-ui", components: p.components, labels: p.labels, editMode: p.editMode, field: "props.media" }) })) : null] }));
+    return (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-stretch", children: [_jsxs("div", { className: "flex flex-col justify-between gap-10 @4xl:col-span-6 @4xl:py-4", children: [_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(Eyebrow, { p: p }), _jsx(Heading, { p: p }), _jsx(Lead, { p: p })] }), _jsxs("div", { className: "flex flex-col gap-5", children: [actionsOf(p), _jsx(ContactLine, { p: p }), _jsx(Fineprint, { p: p })] })] }), p.media ? (_jsx("div", { className: "@4xl:col-span-5 @4xl:col-start-8", children: _jsx(BlockImage, { ...p.media, aspect: "4:5", sizes: columnSizes(5 / 12), className: "h-full rounded-ui", components: p.components, labels: p.labels, editMode: p.editMode, field: "props.media" }) })) : null] }));
 }
 /* minimal --------------------------------------------------------------- */
 function Minimal(p) {
@@ -88,7 +90,7 @@ function Booking(p) {
     const locale = p.locale ?? "en-US";
     let control;
     if (b.provider === "embed" && b.url) {
-        control = (_jsx("div", { className: "relative aspect-[16/10] overflow-hidden rounded-ui border border-line @4xl:aspect-[21/9]", children: _jsxs(EmbedFacade, { kind: "iframe", src: b.url, title: typeof p.title === "string" ? p.title.replace(/\*/g, "") : t("openCalendar"), buttonLabel: t("openCalendar"), children: [b.preview ? _jsx(BlockImage, { ...b.preview, decorative: true, aspect: "21:9", className: "absolute inset-0 h-full opacity-60", components: p.components }) : null, _jsxs("span", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-[color-mix(in_oklch,var(--scene)_55%,transparent)] text-center", children: [_jsxs("span", { className: "inline-flex h-12 items-center gap-2.5 rounded-ui bg-fg px-6 text-[15px] font-semibold text-scene", children: [_jsx(CalendarDays, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[18px]" }), t("openCalendar")] }), _jsx("span", { className: "text-small text-fg-muted", children: t("loadsCalendar", { provider: new URL(b.url).hostname.replace(/^www\./, "") }) })] })] }) }));
+        control = (_jsx("div", { className: "relative aspect-[16/10] overflow-hidden rounded-ui border border-line @4xl:aspect-[21/9]", children: _jsxs(EmbedFacade, { kind: "iframe", src: b.url, title: typeof p.title === "string" ? p.title.replace(/\*/g, "") : t("openCalendar"), buttonLabel: t("openCalendar"), children: [b.preview ? _jsx(BlockImage, { ...b.preview, decorative: true, aspect: "21:9", sizes: SITE_SIZES.container, className: "absolute inset-0 h-full opacity-60", components: p.components }) : null, _jsxs("span", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-[color-mix(in_oklch,var(--scene)_55%,transparent)] text-center", children: [_jsxs("span", { className: "inline-flex h-12 items-center gap-2.5 rounded-ui bg-fg px-6 text-[15px] font-semibold text-scene", children: [_jsx(CalendarDays, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[18px]" }), t("openCalendar")] }), _jsx("span", { className: "text-small text-fg-muted", children: t("loadsCalendar", { provider: new URL(b.url).hostname.replace(/^www\./, "") }) })] })] }) }));
     }
     else if (b.provider === "phone") {
         control = (_jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3", children: [b.phone ? (_jsx(BlockLink, { href: `tel:${b.phone}`, appearance: "primary", components: p.components, labels: p.labels, "data-track": "call", children: formatSitePhone(b.phone, locale) })) : null, actionsOf(p, { forceStyle: "link" })] }));

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

@@ -7,6 +7,7 @@ export interface FeatureItem {
     text?: React.ReactNode;
     /** Lucide name ("calendar-check") or a node. Small, before the title, never boxed. */
     icon?: React.ReactNode;
+    /** `sizes`: tabs/sticky panel `min(59vw, 45rem)` or `min(50vw, 38rem)`, grid `min(34vw, 26rem)`, stacked (narrow) `min(100vw, 56rem)`. */
     media?: SiteImage;
     /** Makes the whole row clickable (one link, stretched with `::after`). */
     link?: {

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

@@ -8,6 +8,7 @@ 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";
+import { columnSizes, SITE_SIZES } from "./shared/image-sizes.js";
 const plain = (n) => (typeof n === "string" ? n : undefined);
 /**
  * Services, treatments or product modules — without the card wall. Server component; the `tabs`
@@ -33,15 +34,15 @@ export function FeatureGrid({ variant = "list", eyebrow, title, lead, actions, i
                         value: `f${i}`,
                         title: it.title,
                         text: it.text,
-                        panel: (_jsxs("div", { className: "flex flex-col gap-4", children: [it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: "(min-width: 56rem) 55vw, 100vw", className: "rounded-ui border border-line", components: components, labels: labels }) : null, it.link ? (_jsxs(BlockLink, { href: it.link.href, newTab: it.link.newTab, appearance: "link", ...linkProps, children: [it.link.label ?? it.title, _jsx(ArrowEnd, {})] })) : null] })),
-                    })) }), _jsx("ol", { className: "flex flex-col @4xl:hidden", children: items.map((it, i) => (_jsxs("li", { className: "flex flex-col gap-3 border-t border-line py-6", children: [itemTitle(it, i), itemText(it, i), it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: "100vw", className: "mt-2 rounded-ui border border-line", components: components, labels: labels }) : null] }, i))) })] }));
+                        panel: (_jsxs("div", { className: "flex flex-col gap-4", children: [it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: columnSizes(7 / 12), className: "rounded-ui border border-line", components: components, labels: labels }) : null, it.link ? (_jsxs(BlockLink, { href: it.link.href, newTab: it.link.newTab, appearance: "link", ...linkProps, children: [it.link.label ?? it.title, _jsx(ArrowEnd, {})] })) : null] })),
+                    })) }), _jsx("ol", { className: "flex flex-col @4xl:hidden", children: items.map((it, i) => (_jsxs("li", { className: "flex flex-col gap-3 border-t border-line py-6", children: [itemTitle(it, i), itemText(it, i), it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: SITE_SIZES.narrowOnly, className: "mt-2 rounded-ui border border-line", components: components, labels: labels }) : null] }, i))) })] }));
     }
     else if (v === "sticky-media") {
         const names = items.map((_, i) => `--vbf-${base.replace(/[^a-zA-Z0-9_-]/g, "")}-${i}`);
-        body = (_jsxs("div", { className: "vb-sticky-features grid gap-x-(--gutter) @4xl:grid-cols-12", style: { timelineScope: names.join(", ") }, children: [_jsx("div", { className: "vb-sticky-media", "aria-hidden": true, children: _jsx("div", { className: "sticky top-[calc(var(--vb-nav-h,4.5rem)+2rem)]", children: _jsx("div", { className: "relative overflow-hidden rounded-ui", children: items.map((it, i) => it.media ? (_jsx(BlockImage, { ...it.media, decorative: true, aspect: "4:5", sizes: "(min-width: 56rem) 45vw, 100vw", className: cn("vb-sticky-frame", i > 0 && "absolute! inset-0"), "data-pos": i === 0 ? "first" : i === items.length - 1 ? "last" : undefined, style: { "--vbf-timeline": names[i], zIndex: i }, components: components }, i)) : null) }) }) }), _jsx("ol", { className: "vb-sticky-list flex flex-col", children: items.map((it, i) => (_jsxs("li", { className: "vb-sticky-item flex min-h-[min(70svh,34rem)] flex-col justify-center gap-4 border-t border-line py-10", style: { viewTimelineName: names[i] }, children: [it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: "100vw", className: "vb-sticky-inline mb-2 rounded-ui", components: components, labels: labels }) : null, _jsx("span", { className: "font-mono text-eyebrow tabular text-fg-subtle", children: indexLabel(i) }), itemTitle(it, i, "text-display-m font-display font-normal"), itemText(it, i, "max-w-[46ch]"), it.link ? (_jsxs(BlockLink, { href: it.link.href, newTab: it.link.newTab, appearance: "link", ...linkProps, className: "mt-2", children: [it.link.label ?? it.title, _jsx(ArrowEnd, {})] })) : null] }, i))) })] }));
+        body = (_jsxs("div", { className: "vb-sticky-features grid gap-x-(--gutter) @4xl:grid-cols-12", style: { timelineScope: names.join(", ") }, children: [_jsx("div", { className: "vb-sticky-media", "aria-hidden": true, children: _jsx("div", { className: "sticky top-[calc(var(--vb-nav-h,4.5rem)+2rem)]", children: _jsx("div", { className: "relative overflow-hidden rounded-ui", children: items.map((it, i) => it.media ? (_jsx(BlockImage, { ...it.media, decorative: true, aspect: "4:5", sizes: columnSizes(6 / 12), className: cn("vb-sticky-frame", i > 0 && "absolute! inset-0"), "data-pos": i === 0 ? "first" : i === items.length - 1 ? "last" : undefined, style: { "--vbf-timeline": names[i], zIndex: i }, components: components }, i)) : null) }) }) }), _jsx("ol", { className: "vb-sticky-list flex flex-col", children: items.map((it, i) => (_jsxs("li", { className: "vb-sticky-item flex min-h-[min(70svh,34rem)] flex-col justify-center gap-4 border-t border-line py-10", style: { viewTimelineName: names[i] }, children: [it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: SITE_SIZES.narrowOnly, className: "vb-sticky-inline mb-2 rounded-ui", components: components, labels: labels }) : null, _jsx("span", { className: "font-mono text-eyebrow tabular text-fg-subtle", children: indexLabel(i) }), itemTitle(it, i, "text-display-m font-display font-normal"), itemText(it, i, "max-w-[46ch]"), it.link ? (_jsxs(BlockLink, { href: it.link.href, newTab: it.link.newTab, appearance: "link", ...linkProps, className: "mt-2", children: [it.link.label ?? it.title, _jsx(ArrowEnd, {})] })) : null] }, i))) })] }));
     }
     else if (v === "grid") {
-        body = (_jsx("ul", { className: cn("grid gap-x-(--gutter) gap-y-12 @2xl:grid-cols-2", columns >= 3 && "@4xl:grid-cols-3", columns === 4 && "@6xl:grid-cols-4", columns === 2 && "@4xl:grid-cols-2"), children: items.map((it, i) => (_jsxs("li", { className: cn("group/fi relative flex flex-col gap-3 border-t border-line pt-4", it.link && "vb-linked"), children: [it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: "(min-width: 56rem) 30vw, 100vw", className: "mb-2 rounded-ui", components: components, labels: labels }) : null, _jsxs("div", { className: "flex items-start gap-3 pt-2", children: [showIndex ? _jsx("span", { className: "pt-1.5 font-mono text-eyebrow tabular text-fg-subtle", children: indexLabel(i) }) : null, it.icon ? _jsx(SiteIcon, { icon: it.icon, className: "mt-1" }) : null, itemTitle(it, i)] }), itemText(it, i), more(it)] }, i))) }));
+        body = (_jsx("ul", { className: cn("grid gap-x-(--gutter) gap-y-12 @2xl:grid-cols-2", columns >= 3 && "@4xl:grid-cols-3", columns === 4 && "@6xl:grid-cols-4", columns === 2 && "@4xl:grid-cols-2"), children: items.map((it, i) => (_jsxs("li", { className: cn("group/fi relative flex flex-col gap-3 border-t border-line pt-4", it.link && "vb-linked"), children: [it.media ? _jsx(BlockImage, { ...it.media, aspect: "3:2", sizes: columnSizes(4 / 12), className: "mb-2 rounded-ui", components: components, labels: labels }) : null, _jsxs("div", { className: "flex items-start gap-3 pt-2", children: [showIndex ? _jsx("span", { className: "pt-1.5 font-mono text-eyebrow tabular text-fg-subtle", children: indexLabel(i) }) : null, it.icon ? _jsx(SiteIcon, { icon: it.icon, className: "mt-1" }) : null, itemTitle(it, i)] }), itemText(it, i), more(it)] }, i))) }));
     }
     else {
         body = (_jsx("ol", { className: "grid gap-x-(--gutter) @4xl:grid-cols-2", children: items.map((it, i) => (_jsxs("li", { className: cn("group/fi relative grid grid-cols-[3rem_1fr] gap-x-4 gap-y-3 border-t border-line py-7 @2xl:grid-cols-[4.5rem_1fr]", it.link && "vb-linked", !showIndex && "grid-cols-1!"), children: [showIndex ? _jsx("span", { className: "row-span-3 pt-1.5 font-mono text-eyebrow tabular text-fg-subtle", children: indexLabel(i) }) : null, itemTitle(it, i), itemText(it, i, "max-w-[52ch]"), more(it)] }, i))) }));

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

@@ -13,7 +13,7 @@ export interface FooterProps extends Omit<BlockBaseProps, "variant" | "labels" |
      */
     variant?: FooterVariant;
     brand: {
-        name: string;
+        name: string; /** An image logo renders 2rem tall (`sizes="12rem"`). */
         logo?: React.ReactNode | SiteImage2;
         href?: string;
     };

package/dist/blocks/site/footer.js

@@ -10,6 +10,7 @@ import { BrandIcon, BRAND_NAMES } from "./shared/brand-icons.js";
 import { ConsentSettingsButton } from "./shared/consent-island.js";
 import { ContactFormIsland } from "./shared/contact-form-island.js";
 import { contactIslandLabelKeys } from "./shared/island-keys.js";
+import { TAP } from "./shared/tap.js";
 const isImage = (v) => !!v && typeof v === "object" && "src" in v && !React.isValidElement(v);
 /**
  * Site footer: navigation, contact, socials, legal links and the company details e-commerce law
@@ -27,14 +28,14 @@ export function Footer({ variant = "columns", brand, about, columns = [], contac
     const y = String(year ?? new Date().getFullYear());
     const ctx = { t, locale, components, labels, editMode };
     const copyright = t("copyright", { year: y, name: company?.legalName ?? brand.name });
-    const legalLine = (_jsxs("div", { className: "flex flex-col gap-3 text-small text-fg-muted @4xl:flex-row @4xl:items-center @4xl:justify-between @4xl:gap-8", children: [_jsx("p", { children: copyright }), _jsx("nav", { "aria-label": t("legal"), children: _jsxs("ul", { className: "flex flex-wrap items-center gap-x-5 gap-y-2", children: [legalLinks.map((l, i) => (_jsx("li", { children: _jsx(BlockLink, { href: l.href, newTab: l.newTab, components: components, labels: labels, locale: locale, className: "rounded-[2px] text-fg-muted underline-offset-[0.25em] transition-colors hover:text-fg hover:underline focus-ring", children: l.label }) }, i))), cookieSettings ? (_jsx("li", { children: _jsx(ConsentSettingsButton, { className: "text-fg-muted transition-colors hover:text-fg", children: t("cookieSettings") }) })) : null, credit ? (_jsx("li", { children: _jsx(BlockLink, { href: credit.href, newTab: credit.newTab, components: components, labels: labels, locale: locale, className: "rounded-[2px] text-fg-muted underline-offset-[0.25em] hover:text-fg hover:underline focus-ring", children: t("madeBy", { name: typeof credit.label === "string" ? credit.label : "" }) }) })) : null] }) })] }));
+    const legalLine = (_jsxs("div", { className: "flex flex-col gap-3 text-small text-fg-muted @4xl:flex-row @4xl:items-center @4xl:justify-between @4xl:gap-8", children: [_jsx("p", { children: copyright }), _jsx("nav", { "aria-label": t("legal"), children: _jsxs("ul", { className: "flex flex-wrap items-center gap-x-5 gap-y-2 pointer-coarse:gap-y-0", children: [legalLinks.map((l, i) => (_jsx("li", { children: _jsx(BlockLink, { href: l.href, newTab: l.newTab, components: components, labels: labels, locale: locale, className: cn(TAP, "rounded-[2px] text-fg-muted underline-offset-[0.25em] transition-colors hover:text-fg hover:underline focus-ring"), children: l.label }) }, i))), cookieSettings ? (_jsx("li", { children: _jsx(ConsentSettingsButton, { className: cn(TAP, "text-fg-muted transition-colors hover:text-fg"), children: t("cookieSettings") }) })) : null, credit ? (_jsx("li", { children: _jsx(BlockLink, { href: credit.href, newTab: credit.newTab, components: components, labels: labels, locale: locale, className: cn(TAP, "rounded-[2px] text-fg-muted underline-offset-[0.25em] hover:text-fg hover:underline focus-ring"), children: t("madeBy", { name: typeof credit.label === "string" ? credit.label : "" }) }) })) : null] }) })] }));
     // The legal name already sits in the © line; the company row only earns its place with registry data.
     const companyLine = company?.registry?.length ? (_jsxs("div", { className: "flex flex-col gap-1.5 @4xl:flex-row @4xl:items-baseline @4xl:gap-6", ...fieldAttr(editMode, "company"), children: [_jsx("p", { className: "text-small text-fg-muted", children: company.legalName }), company.registry?.length ? (_jsx("dl", { className: "flex flex-wrap gap-x-6 gap-y-1 font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: company.registry.map((r, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { children: r.label }), _jsx("dd", { className: "tabular text-fg-muted", children: r.value })] }, i))) })) : null] })) : null;
     if (variant === "minimal") {
         return (_jsx(Section, { as: "footer", theme: { rhythm: "tight", ...theme }, anchor: anchor, blockId: id, blockType: "footer", editMode: editMode, className: cn("vb-footer", className), "data-variant": "minimal", "aria-label": t("footer"), children: _jsxs(Container, { className: "flex flex-col gap-6 @4xl:flex-row @4xl:items-center @4xl:justify-between", children: [_jsx(BrandMark, { brand: brand, ctx: ctx }), columns[0]?.links.length ? (_jsx("nav", { "aria-label": t("footerNav"), children: _jsx("ul", { className: "flex flex-wrap gap-x-6 gap-y-2 text-small", children: columns.flatMap((c) => c.links).slice(0, 5).map((l, i) => (_jsx("li", { children: _jsx(FooterLink, { link: l, ctx: ctx }) }, i))) }) })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3", children: [_jsx(SocialList, { social: social, ctx: ctx }), _jsx("p", { className: "text-small text-fg-muted", children: copyright })] })] }) }));
     }
-    const linkColumns = columns.slice(0, 4).map((c, i) => (_jsxs("nav", { "aria-labelledby": `${base}-col-${i}`, className: "flex flex-col gap-4", children: [_jsx("p", { id: `${base}-col-${i}`, className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: c.title }), _jsx("ul", { className: "flex flex-col gap-2.5", children: c.links.slice(0, 8).map((l, j) => (_jsx("li", { children: _jsx(FooterLink, { link: l, ctx: ctx }) }, j))) })] }, i)));
-    const contactBlock = contact ? (_jsxs("div", { className: "flex flex-col gap-2 text-small text-fg-muted", children: [contact.address ? (_jsx("address", { className: "not-italic", children: (typeof contact.address === "string" ? contact.address.split("\n") : addressLines(contact.address, { locale })).map((l, i) => (_jsx("span", { className: "block", children: l }, i))) })) : null, contact.phone ? (_jsx("a", { href: telHref(contact.phone), className: "self-start text-fg tabular underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": "call", children: prettyPhone(contact.phone) })) : null, contact.email ? (_jsx("a", { href: `mailto:${contact.email}`, className: "self-start text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": "email", children: contact.email })) : null] })) : null;
+    const linkColumns = columns.slice(0, 4).map((c, i) => (_jsxs("nav", { "aria-labelledby": `${base}-col-${i}`, className: "flex flex-col gap-4", children: [_jsx("p", { id: `${base}-col-${i}`, className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: c.title }), _jsx("ul", { className: "flex flex-col gap-2.5 pointer-coarse:gap-0", children: c.links.slice(0, 8).map((l, j) => (_jsx("li", { children: _jsx(FooterLink, { link: l, ctx: ctx }) }, j))) })] }, i)));
+    const contactBlock = contact ? (_jsxs("div", { className: "flex flex-col gap-2 text-small text-fg-muted", children: [contact.address ? (_jsx("address", { className: "not-italic", children: (typeof contact.address === "string" ? contact.address.split("\n") : addressLines(contact.address, { locale })).map((l, i) => (_jsx("span", { className: "block", children: l }, i))) })) : null, contact.phone ? (_jsx("a", { href: telHref(contact.phone), className: cn(TAP, "self-start text-fg tabular underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]"), "data-track": "call", children: prettyPhone(contact.phone) })) : null, contact.email ? (_jsx("a", { href: `mailto:${contact.email}`, className: cn(TAP, "self-start text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]"), "data-track": "email", children: contact.email })) : null] })) : null;
     const newsletterBlock = newsletter ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-body font-medium text-fg", children: newsletter.title ?? t("newsletter") }), _jsx("p", { className: "text-small text-fg-muted", children: newsletter.hint ?? t("newsletterHint") }), _jsx(ContactFormIsland, { action: newsletter.action, fields: [{ name: "email", required: true, label: t("emailAddress") }], labels: { ...labelTemplates(labels, contactIslandLabelKeys), send: t("subscribe"), sent: t("subscribed") }, locale: locale, layout: "minimal", idBase: `${base}-nl`, className: "vb-footer-newsletter" })] })) : null;
     if (variant === "wordmark") {
         return (_jsxs(Section, { as: "footer", theme: theme, anchor: anchor, blockId: id, blockType: "footer", editMode: editMode, className: cn("vb-footer overflow-hidden pb-0!", className), "data-variant": "wordmark", "aria-label": t("footer"), children: [_jsxs(Container, { className: "flex flex-col gap-12", children: [_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @2xl:grid-cols-2 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-5 @4xl:col-span-4", children: [about ? _jsx("p", { className: "max-w-[40ch] text-fg-muted text-pretty", children: about }) : null, contactBlock, _jsx(SocialList, { social: social, ctx: ctx })] }), _jsx("div", { className: "grid grid-cols-2 gap-x-(--gutter) gap-y-10 @2xl:col-span-1 @4xl:col-span-8 @4xl:grid-cols-4", children: linkColumns })] }), newsletterBlock ? _jsx("div", { className: "max-w-xl", children: newsletterBlock }) : null, _jsxs("div", { className: "flex flex-col gap-4 border-t border-line pt-6", children: [companyLine, legalLine] })] }), _jsx("p", { "aria-hidden": true, className: "vb-wordmark select-none whitespace-nowrap px-(--gutter) font-display text-display-2xl leading-[0.78] text-fg", 
@@ -46,16 +47,16 @@ export function Footer({ variant = "columns", brand, about, columns = [], contac
     return (_jsx(Section, { as: "footer", theme: theme, anchor: anchor, blockId: id, blockType: "footer", editMode: editMode, className: cn("vb-footer", className), "data-variant": "columns", "aria-label": t("footer"), children: _jsxs(Container, { className: "flex flex-col gap-14", children: [_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-4", children: [_jsx(BrandMark, { brand: brand, ctx: ctx }), about ? (_jsx("p", { className: "max-w-[40ch] text-small text-fg-muted text-pretty", ...fieldAttr(editMode, "about"), children: about })) : null, contactBlock, _jsx(SocialList, { social: social, ctx: ctx })] }), _jsx("div", { className: cn("grid grid-cols-2 gap-x-(--gutter) gap-y-10 @4xl:col-span-7 @4xl:col-start-6", columns.length >= 3 && "@2xl:grid-cols-3", columns.length >= 4 && "@6xl:grid-cols-4"), children: linkColumns })] }), newsletterBlock ? _jsx("div", { className: "max-w-xl border-t border-line pt-10", children: newsletterBlock }) : null, _jsxs("div", { className: "flex flex-col gap-4 border-t border-line pt-6", children: [companyLine, legalLine] })] }) }));
 }
 function BrandMark({ brand, ctx }) {
-    const mark = isImage(brand.logo) ? (_jsx(BlockImage, { ...brand.logo, alt: brand.logo.alt ?? brand.name, fit: "contain", className: "h-8 w-auto bg-transparent", components: ctx.components })) : ((brand.logo ?? _jsx("span", { className: "font-display text-display-m leading-none text-fg", children: brand.name })));
+    const mark = isImage(brand.logo) ? (_jsx(BlockImage, { ...brand.logo, alt: brand.logo.alt ?? brand.name, fit: "contain", sizes: "12rem", className: "h-8 w-auto bg-transparent", components: ctx.components })) : ((brand.logo ?? _jsx("span", { className: "font-display text-display-m leading-none text-fg", children: brand.name })));
     if (!brand.href)
         return _jsx("div", { className: "self-start", children: mark });
-    return (_jsx(BlockLink, { href: brand.href, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": brand.name, className: "self-start rounded-[2px] focus-ring", children: mark }));
+    return (_jsx(BlockLink, { href: brand.href, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": brand.name, className: "inline-flex min-h-6 items-center self-start rounded-[2px] focus-ring pointer-coarse:min-h-11", children: mark }));
 }
 function FooterLink({ link, ctx }) {
-    return (_jsx(BlockLink, { href: link.href, newTab: link.newTab, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "rounded-[2px] text-small text-fg underline-offset-[0.25em] transition-colors hover:text-accent-ink hover:underline focus-ring", children: link.label }));
+    return (_jsx(BlockLink, { href: link.href, newTab: link.newTab, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: cn(TAP, "rounded-[2px] text-small text-fg underline-offset-[0.25em] transition-colors hover:text-accent-ink hover:underline focus-ring"), children: link.label }));
 }
 function SocialList({ social, ctx }) {
     if (!social?.length)
         return null;
-    return (_jsx("ul", { className: "flex flex-wrap items-center gap-1", "aria-label": ctx.t("social"), children: social.slice(0, 6).map((s, i) => (_jsx("li", { children: _jsx("a", { href: s.href, target: "_blank", rel: "noopener noreferrer", "aria-label": `${BRAND_NAMES[s.network]} ${ctx.t("opensInNewTab")}`, className: "inline-flex size-10 items-center justify-center rounded-ui-sm text-fg-muted transition-colors hover:bg-hover hover:text-fg focus-ring", "data-track": `social:${s.network}`, children: _jsx(BrandIcon, { name: s.network, className: "size-[18px]" }) }) }, i))) }));
+    return (_jsx("ul", { className: "flex flex-wrap items-center gap-1 pointer-coarse:-ms-1", "aria-label": ctx.t("social"), children: social.slice(0, 6).map((s, i) => (_jsx("li", { children: _jsx("a", { href: s.href, target: "_blank", rel: "noopener noreferrer", "aria-label": `${BRAND_NAMES[s.network]} ${ctx.t("opensInNewTab")}`, className: "inline-flex size-10 items-center justify-center rounded-ui-sm text-fg-muted transition-colors hover:bg-hover hover:text-fg focus-ring pointer-coarse:size-11", "data-track": `social:${s.network}`, children: _jsx(BrandIcon, { name: s.network, className: "size-[18px]" }) }) }, i))) }));
 }

package/dist/blocks/site/gallery-section.d.ts

@@ -22,7 +22,12 @@ export interface GallerySectionProps extends Omit<BlockBaseProps, "variant" | "l
     eyebrow?: React.ReactNode;
     title?: React.ReactNode;
     lead?: React.ReactNode;
-    /** 3–40 images, `alt` required. */
+    /**
+     * 3–40 images, `alt` required. `sizes` per variant: mosaic `min(34vw, 26rem)` per 4-col cell
+     * (`min(67vw, 51rem)` for wide/big) above 42rem, 50vw/100vw below · grid `min(34vw, 26rem)` /
+     * 50vw · filmstrip from the cell height × ratio (≈ 12–24rem for 4:5) · split-caption
+     * `min(59vw, 45rem)` / 100vw.
+     */
     images: GalleryImage[];
     /** Open images in a full-screen viewer. Default true. */
     lightbox?: boolean;

package/dist/blocks/site/gallery-section.js

@@ -8,6 +8,7 @@ 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";
+import { columnSizes, filmstripSizes } from "./shared/image-sizes.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"),
@@ -25,19 +26,19 @@ export function GallerySection({ variant: variantProp = "mosaic", eyebrow, title
     const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale }) : null;
     let body;
     if (variant === "filmstrip") {
-        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 }) })] }));
+        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: filmstripSizes(g.image.width && g.image.height ? g.image.width / g.image.height : 0.8), 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(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))) }) }));
+        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: g.span === "wide" || g.span === "big" ? columnSizes(8 / 12, { from: "42rem" }) : columnSizes(4 / 12, { from: "42rem", narrow: "50vw" }), fill: true }) }, i))) }) }));
     }
     else if (variant === "split-caption") {
         body = null;
     }
     else {
         const a = aspect === "mixed" ? undefined : aspect;
-        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))) }) }));
+        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: columnSizes(1 / 3, { narrow: "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 })] }));
+    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: columnSizes(7 / 12) }), 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) }) }));
 }
 function Cell({ g, i, ctx, className, style, sizes, aspect, fill }) {

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

@@ -13,11 +13,12 @@ export interface HeroProps extends Omit<BlockBaseProps, "variant" | "labels"> {
     variant?: HeroVariant;
     /** Small mono line above the title ("Agency · Maltepe, Istanbul"). */
     eyebrow?: React.ReactNode;
-    /** The page `h1`. A string supports one `*emphasis*`. ≤ 9 words reads best. */
+    /** The page `h1`. A string supports one `*emphasis*`; `\n` sets a line break (each line is a block, joined by a real space so search engines and screen readers read "közde, muhabbet"). ≤ 9 words reads best. */
     title: React.ReactNode;
     lead?: React.ReactNode;
     /** Up to two actions; one primary. */
     actions?: SiteCta[];
+    /** `sizes`: editorial strip and full-bleed `100vw`; split-media portrait `(min-width: 56rem) 42vw, 100vw` (it bleeds to the edge). Above the fold: always `priority`. */
     media?: SiteImage;
     /** full-bleed: muted looping MP4 (`media` is the required poster). */
     video?: {
@@ -27,7 +28,7 @@ export interface HeroProps extends Omit<BlockBaseProps, "variant" | "labels"> {
     caption?: React.ReactNode;
     /** Small true facts ("Founded" · "2014"), up to 4. */
     meta?: SiteMeta[];
-    /** product: the product screenshot (no device frame). */
+    /** product: the product screenshot (no device frame). `sizes`: `min(100vw, 76rem)`. */
     screenshot?: SiteImage;
     /** product: a live composition instead of a screenshot (plain JSX only). */
     visual?: React.ReactNode;

package/dist/blocks/site/hero.js

@@ -6,6 +6,8 @@ import { BlockImage } from "../block-image.js";
 import { BlockLink } from "../block-link.js";
 import { HeroVideo } from "./hero-video.js";
 import { ArrowEnd, CtaList, field, siteText, useBlockIds } from "./_kit-1.js";
+import { headingLines } from "./shared/heading-lines.js";
+import { columnSizes, SITE_SIZES } from "./shared/image-sizes.js";
 /**
  * The first screen and the page `h1`, in five characters per sector — never the generic
  * "centred title + two buttons + abstract visual". Server component; the background video is a
@@ -43,28 +45,28 @@ 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", enter(p.editMode, 1, "title"), className) }));
+    return (_jsx(BlockHeading, { id: p.headingId, level: p.headingLevel, size: size, text: headingLines(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, 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] }));
+    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: SITE_SIZES.bleed, 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, 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] }));
+    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: columnSizes(5 / 12, { bleed: true }), 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: 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] })] }));
+    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: SITE_SIZES.bleed, 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: 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] }));
+    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: SITE_SIZES.container, components: components, labels: labels }) })) : null] }));
 }
 /* statement ------------------------------------------------------------ */
 function Statement(p) {