@vamos-ui/react 0.3.0 → 0.4.1

package/README.md

@@ -23,6 +23,10 @@ export default function Page() {
 }
 ```
 
+Next.js with webpack (`next build --webpack`, the Next.js 15 default): add
+`experimental: { optimizePackageImports: ["@vamos-ui/react"] }` to next.config, or a Server Component
+that imports from the package root ships every client component. Turbopack and Vite need nothing.
+
 Prefer to own the source? Copy single components with the CLI: `npx vamos-ui add button`.
 
 MIT licensed. “Vamos UI” and the logo are trademarks of Vamos.

package/dist/blocks/block-heading.js

@@ -29,7 +29,7 @@ export function renderEmphasis(text) {
  * <BlockHeading level={1} size="display-xl" text="Dinner, *slowly*." />
  * ```
  */
-export const BlockHeading = React.forwardRef(function BlockHeading({ text, children, level = 2, size = "display-m", editMode, field, labels, locale, className, ...props }, ref) {
+export const BlockHeading = /*#__PURE__*/ React.forwardRef(function BlockHeading({ text, children, level = 2, size = "display-m", editMode, field, labels, locale, className, ...props }, ref) {
     const Tag = `h${level}`;
     const content = children ?? renderEmphasis(text);
     const empty = content === undefined || content === null || content === "";

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

@@ -14,9 +14,9 @@ import { isExternalUrl, sanitizeHref } from "./schema/safety.js";
  * <BlockLink href="https://maps.app.goo.gl/x" newTab>Directions</BlockLink>
  * ```
  */
-export const BlockLink = React.forwardRef(function BlockLink({ href, newTab, appearance, size = "lg", components, labels, locale, field, editMode, className, children, rel, target, ...props }, ref) {
+export const BlockLink = /*#__PURE__*/ 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

@@ -6,7 +6,7 @@ export { BlockLink, type BlockLinkProps } from "./block-link.js";
 export { RichText, renderInline, renderRichBlocks, type RichTextProps, type RichTextRenderOptions } from "./rich-text.js";
 export { JsonLd, mergeJsonLd, serializeJsonLd, type JsonLdProps, type JsonLdNode } from "./json-ld.js";
 export { createBlocks, fieldAttrs, type CreateBlocksOptions, type BoundBlocks } from "./create-blocks.js";
-export { blockLabels, blockLabelsTr, blockText, type BlockLabels } from "./labels.js";
+export { blockLabels, blockLabelsTr, blockLabelsDe, blockLabelsFr, blockLabelsEs, blockLabelsAr, blockText, type BlockLabels } from "./labels.js";
 export type { BlockAdapters, BlockBaseProps, BlockComponentProps, BlockRuntime, ImageData, LinkData } from "./types.js";
 export { parseEmphasis, stripEmphasis, type EmphasisPart } from "./schema/emphasis.js";
 export { sanitizeHref, isExternalUrl, linkKindOf } from "./schema/safety.js";
@@ -35,21 +35,21 @@ 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 { Footer, footerJsonLd, 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";
 export { getConsent, onConsent, readConsent, writeConsent, parseConsent, openConsentPreferences, consentDefaultsScript, consentModeSignals, CONSENT_COOKIE, CONSENT_EVENT, CONSENT_OPEN_EVENT, CONSENT_CATEGORIES, type ConsentCategory, type ConsentRecord, type ConsentChoices } from "./site/shared/consent.js";
 export { validateContactForm, isSpam, contactFieldLabel, HONEYPOT_FIELD, type ContactFieldConfig, type ContactFieldName, type SiteFormState, type SiteFormAction, type ContactValidation } from "./site/shared/site-form.js";
 export { BrandIcon, BRAND_NAMES, type BrandName, type BrandIconProps } from "./site/shared/brand-icons.js";
-export { site2Labels, site2LabelsTr, type Site2Labels, type Site2BlockLabels } from "./site/shared/labels-2.js";
+export { site2Labels, site2LabelsTr, site2LabelsDe, site2LabelsFr, site2LabelsEs, site2LabelsAr, type Site2Labels, type Site2BlockLabels } from "./site/shared/labels-2.js";
 export { SiteShell, SiteShellPage, SiteShellLocale, SiteShellLink, useSiteShell, type SiteShellProps, type SiteShellPageProps, type SiteShellLocaleProps, type SiteShellLinkProps, type SiteShellContextValue } from "./site/site-shell.js";
 export { siteAccent, siteAccentCss, siteAccentKey, isBuiltInAccent, BUILT_IN_SITE_ACCENTS, SITE_TEXT_CONTRAST, type SiteAccentPalette, type SiteAccentOptions } from "./site/shared/site-accent.js";
 export { sitePageHref, siteLocaleHref, parseSiteHref, readSiteLocation, writeSiteLocation, type SiteRouting, type SiteLocation, type SiteRouteParams } from "./site/shared/site-routing.js";

package/dist/blocks/index.js

@@ -8,7 +8,7 @@ export { BlockLink } from "./block-link.js";
 export { RichText, renderInline, renderRichBlocks } from "./rich-text.js";
 export { JsonLd, mergeJsonLd, serializeJsonLd } from "./json-ld.js";
 export { createBlocks, fieldAttrs } from "./create-blocks.js";
-export { blockLabels, blockLabelsTr, blockText } from "./labels.js";
+export { blockLabels, blockLabelsTr, blockLabelsDe, blockLabelsFr, blockLabelsEs, blockLabelsAr, blockText } from "./labels.js";
 // Pure helpers (no zod) re-exported for components
 export { parseEmphasis, stripEmphasis } from "./schema/emphasis.js";
 export { sanitizeHref, isExternalUrl, linkKindOf } from "./schema/safety.js";
@@ -37,22 +37,22 @@ 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";
 export { EmbedFacade } from "./site/embed-facade.js";
-export { Footer } from "./site/footer.js";
+export { Footer, footerJsonLd } 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";
 export { getConsent, onConsent, readConsent, writeConsent, parseConsent, openConsentPreferences, consentDefaultsScript, consentModeSignals, CONSENT_COOKIE, CONSENT_EVENT, CONSENT_OPEN_EVENT, CONSENT_CATEGORIES } from "./site/shared/consent.js";
 export { validateContactForm, isSpam, contactFieldLabel, HONEYPOT_FIELD } from "./site/shared/site-form.js";
 export { BrandIcon, BRAND_NAMES } from "./site/shared/brand-icons.js";
-export { site2Labels, site2LabelsTr } from "./site/shared/labels-2.js";
+export { site2Labels, site2LabelsTr, site2LabelsDe, site2LabelsFr, site2LabelsEs, site2LabelsAr } from "./site/shared/labels-2.js";
 // Site shell: locale switch, inner pages and a scoped accent for whole-site blocks
 export { SiteShell, SiteShellPage, SiteShellLocale, SiteShellLink, useSiteShell } from "./site/site-shell.js";
 export { siteAccent, siteAccentCss, siteAccentKey, isBuiltInAccent, BUILT_IN_SITE_ACCENTS, SITE_TEXT_CONTRAST } from "./site/shared/site-accent.js";

package/dist/blocks/labels.d.ts

@@ -16,5 +16,13 @@ export declare const blockLabels: {
 export type BlockLabels = typeof blockLabels;
 /** Turkish dictionary for site blocks. */
 export declare const blockLabelsTr: BlockLabels;
+/** German dictionary for site blocks. */
+export declare const blockLabelsDe: BlockLabels;
+/** French dictionary for site blocks. */
+export declare const blockLabelsFr: BlockLabels;
+/** Spanish dictionary for site blocks. */
+export declare const blockLabelsEs: BlockLabels;
+/** Arabic dictionary for site blocks. */
+export declare const blockLabelsAr: BlockLabels;
 /** Label lookup for server components: `labels` prop → English. */
 export declare function blockText(labels?: Partial<BlockLabels>, locale?: string): (key: keyof BlockLabels, vars?: Record<string, unknown>) => string;

package/dist/blocks/labels.js

@@ -30,6 +30,66 @@ export const blockLabelsTr = {
     emptyImage: "Görsel yok",
     codeSample: "Kod örneği",
 };
+/** German dictionary for site blocks. */
+export const blockLabelsDe = {
+    opensInNewTab: "(öffnet in einem neuen Tab)",
+    skipToContent: "Zum Inhalt springen",
+    addTitle: "Titel hinzufügen",
+    addText: "Text hinzufügen",
+    addImage: "Bild hinzufügen",
+    unknownBlock: "Unbekannter Block „{type}“",
+    unknownBlockHint: "Dieser Blocktyp ist nicht installiert. Sein Inhalt bleibt erhalten und wird wieder angezeigt, sobald der Block verfügbar ist.",
+    invalidBlock: "„{type}“ enthält ungültige Inhalte",
+    invalidBlockHint: "{count, plural, one {# Feld wurde} other {# Felder wurden}} durch Standardwerte ersetzt. Korrigieren Sie sie im Editor.",
+    newerBlock: "„{type}“ wurde mit einer neueren Version gespeichert (v{v})",
+    emptyImage: "Kein Bild",
+    codeSample: "Codebeispiel",
+};
+/** French dictionary for site blocks. */
+export const blockLabelsFr = {
+    opensInNewTab: "(s’ouvre dans un nouvel onglet)",
+    skipToContent: "Aller au contenu",
+    addTitle: "Ajouter un titre",
+    addText: "Ajouter du texte",
+    addImage: "Ajouter une image",
+    unknownBlock: "Bloc inconnu « {type} »",
+    unknownBlockHint: "Ce type de bloc n’est pas installé. Son contenu est conservé et s’affichera de nouveau dès que le bloc sera disponible.",
+    invalidBlock: "« {type} » contient des données non valides",
+    invalidBlockHint: "{count, plural, one {# champ a été remplacé} other {# champs ont été remplacés}} par les valeurs par défaut. Corrigez-les dans l’éditeur.",
+    newerBlock: "« {type} » a été enregistré avec une version plus récente (v{v})",
+    emptyImage: "Aucune image",
+    codeSample: "Exemple de code",
+};
+/** Spanish dictionary for site blocks. */
+export const blockLabelsEs = {
+    opensInNewTab: "(se abre en una pestaña nueva)",
+    skipToContent: "Saltar al contenido",
+    addTitle: "Añade un título",
+    addText: "Añade texto",
+    addImage: "Añade una imagen",
+    unknownBlock: "Bloque desconocido «{type}»",
+    unknownBlockHint: "Este tipo de bloque no está instalado. Su contenido se conserva y volverá a mostrarse cuando el bloque esté disponible.",
+    invalidBlock: "«{type}» tiene contenido no válido",
+    invalidBlockHint: "{count, plural, one {Se ha sustituido # campo} other {Se han sustituido # campos}} por valores predeterminados. Corrígelos en el editor.",
+    newerBlock: "«{type}» se guardó con una versión más reciente (v{v})",
+    emptyImage: "Sin imagen",
+    codeSample: "Ejemplo de código",
+};
+/** Arabic dictionary for site blocks. */
+export const blockLabelsAr = {
+    opensInNewTab: "(يُفتح في علامة تبويب جديدة)",
+    skipToContent: "انتقل إلى المحتوى",
+    addTitle: "أضف عنوانًا",
+    addText: "أضف نصًا",
+    addImage: "أضف صورة",
+    unknownBlock: "كتلة غير معروفة «{type}»",
+    unknownBlockHint: "نوع الكتلة هذا غير مثبّت. يُحتفظ بمحتواها وستظهر مجددًا عند توفّر الكتلة.",
+    invalidBlock: "تحتوي «{type}» على محتوى غير صالح",
+    invalidBlockHint: "{count, plural, zero {لم يُستبدل أي حقل} one {استُبدل حقل واحد} two {استُبدل حقلان} few {استُبدلت # حقول} many {استُبدل # حقلًا} other {استُبدل # حقل}} بالقيم الافتراضية. صحّحها في المحرر.",
+    newerBlock: "حُفظت «{type}» بإصدار أحدث (v{v})",
+    emptyImage: "لا توجد صورة",
+    codeSample: "مثال برمجي",
+};
 /** Label lookup for server components: `labels` prop → English. */
 export function blockText(labels, locale = "en-US") {
     const merged = { ...blockLabels };

package/dist/blocks/section-header.js

@@ -10,7 +10,7 @@ import { BlockHeading, renderEmphasis } from "./block-heading.js";
  * <SectionHeader eyebrow="Private dining" title="Rooms for *twelve* or forty" lead="…" align="split" headingId="rooms" />
  * ```
  */
-export const SectionHeader = React.forwardRef(function SectionHeader({ eyebrow, index, title, lead, actions, align = "start", size = "m", headingLevel = 2, headingId, editMode, labels, locale, className, ...props }, ref) {
+export const SectionHeader = /*#__PURE__*/ React.forwardRef(function SectionHeader({ eyebrow, index, title, lead, actions, align = "start", size = "m", headingLevel = 2, headingId, editMode, labels, locale, className, ...props }, ref) {
     const heading = (_jsx(BlockHeading, { id: headingId, level: headingLevel, size: size === "l" ? "display-l" : "display-m", text: title, editMode: editMode, field: "props.title", labels: labels, locale: locale }));
     const eyebrowEl = eyebrow || index ? (_jsxs("p", { className: cn("flex items-center gap-3 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", align === "center" && "justify-center"), "data-field": editMode ? "props.eyebrow" : undefined, children: [index ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tabular text-fg", children: index }), _jsx("span", { "aria-hidden": true, className: "h-px w-6 bg-current opacity-40" })] })) : null, eyebrow ? _jsx("span", { children: renderEmphasis(eyebrow) }) : null] })) : null;
     const leadEl = lead ? (_jsx("p", { className: "vb-lead max-w-(--measure) text-lead text-fg-muted", "data-field": editMode ? "props.lead" : undefined, children: lead })) : null;

package/dist/blocks/section.js

@@ -46,7 +46,7 @@ export function sectionThemeAttributes(theme) {
  * </Section>
  * ```
  */
-export const Section = React.forwardRef(function Section({ as: Comp = "section", theme, anchor, headingId, blockId, blockType, editMode, priority, components, labels, className, style, children, ...props }, ref) {
+export const Section = /*#__PURE__*/ React.forwardRef(function Section({ as: Comp = "section", theme, anchor, headingId, blockId, blockType, editMode, priority, components, labels, className, style, children, ...props }, ref) {
     const t = sectionThemeAttributes(theme);
     const bg = theme?.surface === "media" ? theme.background : undefined;
     return (_jsxs(Comp, { ref: ref, id: anchor, "aria-labelledby": headingId, className: cn("vb-section", t.className, className), style: t.style || style ? { ...t.style, ...style } : undefined, "data-block-id": editMode ? blockId : undefined, "data-block-type": editMode ? blockType : undefined, ...t.attrs, ...props, children: [bg ? _jsx(SectionMedia, { image: bg, priority: priority, components: components, labels: labels }) : null, children] }));
@@ -56,7 +56,7 @@ function SectionMedia({ image, priority, components, labels }) {
     return (_jsx("div", { className: "vb-section-media", "aria-hidden": "true", children: _jsx(BlockImage, { src: image.src, width: image.width, height: image.height, blurDataURL: image.blurDataURL, focal: image.focal, decorative: true, priority: priority, sizes: "100vw", components: components, labels: labels }) }));
 }
 /** Centres content at a token width with fluid gutters (`--gutter`). Server component. */
-export const Container = React.forwardRef(function Container({ size = "content", className, ...props }, ref) {
+export const Container = /*#__PURE__*/ React.forwardRef(function Container({ size = "content", className, ...props }, ref) {
     return _jsx("div", { ref: ref, "data-size": size === "content" ? undefined : size, className: cn("vb-container", className), ...props });
 });
 /** "Skip to content" — the first focusable element of a site, before the navbar. */

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/feature-tabs.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tabs } from "radix-ui";
+import * as Tabs from "radix-ui/tabs";
 import { cn } from "../../lib/cn.js";
 /**
  * Tabs island of the Feature grid `tabs` variant (WAI-ARIA Tabs via Radix, vertical arrow keys).

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type JsonLdNode } from "../json-ld.js";
 import type { BlockBaseProps } from "../types.js";
 import type { AddressValue, SocialNetwork } from "../schema/types.js";
 import { type Site2BlockLabels } from "./shared/labels-2.js";
@@ -13,7 +14,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;
     };
@@ -53,8 +54,16 @@ export interface FooterProps extends Omit<BlockBaseProps, "variant" | "labels" |
     };
     /** © year. Default: the render year. */
     year?: number;
+    /**
+     * Organization JSON-LD built from brand, company, contact and social. Default true. Pass an
+     * object to refine it (`{ "@type": "Dentist", url: "https://…" }`; a LocalBusiness subtype
+     * suits a shop or clinic), or false when the page already emits its own.
+     */
+    jsonLd?: boolean | JsonLdNode;
     labels?: Site2BlockLabels;
 }
+/** `Organization` JSON-LD from the footer's details (absolute brand href becomes `url`). */
+export declare function footerJsonLd(props: Pick<FooterProps, "brand" | "company" | "contact" | "social">): JsonLdNode;
 /**
  * Site footer: navigation, contact, socials, legal links and the company details e-commerce law
  * requires in many countries. `footer` landmark with labelled inner navs; social links are named
@@ -65,4 +74,4 @@ export interface FooterProps extends Omit<BlockBaseProps, "variant" | "labels" |
  *   company={{ legalName: "Vamos Dijital Ajans Ltd. Şti.", registry: [{ label: "Tax no.", value: "923 145 6780" }] }} />
  * ```
  */
-export declare function Footer({ variant, brand, about, columns, contact, social, legalLinks, company, credit, cookieSettings, newsletter, year, id, anchor, theme, className, labels, locale, components, editMode, }: FooterProps): React.JSX.Element;
+export declare function Footer({ variant, brand, about, columns, contact, social, legalLinks, company, credit, cookieSettings, newsletter, year, jsonLd, id, anchor, theme, className, labels, locale, components, editMode, }: FooterProps): React.JSX.Element;