@vamos-ui/react 0.3.0 → 0.4.0

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

@@ -5,6 +5,7 @@ export type LogoStripVariant = "row" | "marquee" | "grid";
 export interface LogoItem {
     /** Brand name — the logo's alt text. */
     name: string;
+    /** Logo, 1.75rem tall, at most 9rem wide (`sizes="9rem"`). */
     image: SiteImage;
     /** Used inside dark sections / dark mode instead of `invert()`. */
     imageDark?: SiteImage;

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

@@ -19,7 +19,7 @@ export function LogoStrip({ variant = "row", caption, logos, monochrome = true,
     const t = siteText(labels, locale);
     const marquee = variant === "marquee" && logos.length >= 4;
     const logo = (l, i) => {
-        const img = (_jsxs(_Fragment, { children: [_jsx(BlockImage, { ...l.image, alt: l.name, fit: "contain", className: cn("vb-logo", l.imageDark && "vb-logo-light"), components: components }), l.imageDark ? _jsx(BlockImage, { ...l.imageDark, decorative: true, fit: "contain", className: "vb-logo vb-logo-dark", components: components }) : null] }));
+        const img = (_jsxs(_Fragment, { children: [_jsx(BlockImage, { ...l.image, alt: l.name, fit: "contain", sizes: "9rem", className: cn("vb-logo", l.imageDark && "vb-logo-light"), components: components }), l.imageDark ? _jsx(BlockImage, { ...l.imageDark, decorative: true, fit: "contain", sizes: "9rem", className: "vb-logo vb-logo-dark", components: components }) : null] }));
         return (_jsx("li", { className: "vb-logo-item flex shrink-0 items-center justify-center", "data-field": editMode ? `props.logos.${i}` : undefined, children: l.link ? (_jsx(BlockLink, { href: l.link.href, newTab: l.link.newTab, components: components, labels: labels, locale: locale, className: "flex items-center rounded-[2px] focus-ring", children: img })) : (img) }, i));
     };
     const captionEl = caption ? (_jsx("p", { id: headingId, className: cn("text-small text-fg-muted text-pretty", variant === "row" && "max-w-[26ch] shrink-0"), "data-field": editMode ? "props.caption" : undefined, children: caption })) : null;

package/dist/blocks/site/map-hours.d.ts

@@ -15,7 +15,7 @@ export interface Branch {
     phone?: string;
     email?: string;
     hours: OpeningHours;
-    /** Static map picture for the facade (greyscale, an accent pin on top). */
+    /** Static map picture for the facade (greyscale, an accent pin on top). `sizes`: `(min-width: 56rem) min(59vw, 45rem), 100vw`. */
     mapImage?: SiteImage2;
     /** Google Business Profile / place link. */
     placeUrl?: string;
@@ -40,7 +40,7 @@ export interface MapHoursProps extends Omit<BlockBaseProps, "variant" | "labels"
     mapProvider?: "google" | "osm" | "none";
     /** Direction links. Default google · apple (Yandex is common in Turkey, Waze elsewhere). */
     directions?: DirectionsProvider[];
-    /** "Open now · closes at 22:00" island. Default true. */
+    /** "Open · until 10 PM" island ("Closing soon · open until 10 PM", "Closed · opens tomorrow at 12 PM"). Default true. */
     showOpenNow?: boolean;
     /**
      * Weekly hours: `week` (default) lists all seven days, `open-days` hides closed days (a venue

package/dist/blocks/site/map-hours.js

@@ -10,6 +10,8 @@ import { OpenNow } from "./shared/open-now.js";
 import { ConsentGate } from "./shared/consent-gate.js";
 import { openNowLabelKeys } from "./shared/island-keys.js";
 import { BrandIcon, BRAND_NAMES } from "./shared/brand-icons.js";
+import { columnSizes } from "./shared/image-sizes.js";
+import { TAP } from "./shared/tap.js";
 const DIRECTION_BRAND = { google: "google-maps", apple: "apple-maps", yandex: "yandex-maps", waze: "waze" };
 const query = (b) => (b.address.geo ? `${b.address.geo.lat},${b.address.geo.lng}` : [b.name, ...addressLines(b.address, { withCountry: true })].join(", "));
 /** Direction URL for a provider (no API keys). */
@@ -87,7 +89,7 @@ export function MapHours({ variant: variantProp = "map-split", eyebrow, title, l
 }
 function MapFacade({ branch, ctx }) {
     const src = ctx.mapProvider !== "none" ? mapEmbedUrl(branch, ctx.mapProvider) : undefined;
-    const preview = branch.mapImage?.src ? (_jsxs(_Fragment, { children: [_jsx(BlockImage, { ...branch.mapImage, decorative: true, aspect: "4:3", sizes: "(min-width: 56rem) 58vw, 100vw", className: "size-full", imgClassName: "vb-map-img", components: ctx.components }), _jsx("span", { "aria-hidden": true, className: "vb-map-pin absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-full text-accent rtl:translate-x-1/2", children: _jsxs("svg", { viewBox: "0 0 32 40", className: "h-10 w-8 drop-shadow-sm", children: [_jsx("path", { d: "M16 0C7.16 0 0 7.16 0 16c0 11.2 14.4 23.2 15.04 23.72a1.5 1.5 0 0 0 1.92 0C17.6 39.2 32 27.2 32 16 32 7.16 24.84 0 16 0Z", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "16", r: "6", fill: "var(--accent-fg)" })] }) })] })) : null;
+    const preview = branch.mapImage?.src ? (_jsxs(_Fragment, { children: [_jsx(BlockImage, { ...branch.mapImage, decorative: true, aspect: "4:3", sizes: columnSizes(7 / 12), className: "size-full", imgClassName: "vb-map-img", components: ctx.components }), _jsx("span", { "aria-hidden": true, className: "vb-map-pin absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-full text-accent rtl:translate-x-1/2", children: _jsxs("svg", { viewBox: "0 0 32 40", className: "h-10 w-8 drop-shadow-sm", children: [_jsx("path", { d: "M16 0C7.16 0 0 7.16 0 16c0 11.2 14.4 23.2 15.04 23.72a1.5 1.5 0 0 0 1.92 0C17.6 39.2 32 27.2 32 16 32 7.16 24.84 0 16 0Z", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "16", r: "6", fill: "var(--accent-fg)" })] }) })] })) : null;
     if (!src)
         return preview ? _jsx("div", { className: "vb-gate relative aspect-[4/3] overflow-hidden rounded-ui bg-surface-2", children: preview }) : null;
     return (_jsx(ConsentGate, { src: src, title: ctx.t("mapOf", { name: branch.name }), loadLabel: ctx.t("loadMap"), notice: ctx.t("mapNotice", { provider: ctx.mapProvider === "osm" ? "OpenStreetMap" : "Google Maps" }), rememberLabel: ctx.t("rememberChoice"), category: "functional", children: preview }));
@@ -117,7 +119,7 @@ function BranchDetails({ branch, ctx, index }) {
 function InfoColumns({ branch, ctx }) {
     const summary = summarizeHours(branch.hours, ctx.locale).filter((s) => ctx.hoursDisplay !== "open-days" || !s.closed);
     const showHours = ctx.hoursDisplay !== "none" || ctx.showOpenNow;
-    return (_jsxs("div", { className: cn("grid gap-x-(--gutter) gap-y-10 border-t border-line pt-8", showHours ? "@2xl:grid-cols-3" : "@2xl:grid-cols-2"), children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("address") }), _jsx(AddressBlock, { branch: branch, ctx: ctx, large: true }), branch.notes ? _jsx("p", { className: "text-small text-fg-muted", children: branch.notes }) : null, ctx.directions[0] ? (_jsxs("a", { href: directionsUrl(ctx.directions[0], branch), target: "_blank", rel: "noopener noreferrer", className: "mt-1 self-start text-small font-medium text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": `directions:${ctx.directions[0]}`, children: [ctx.t("directionsVia", { provider: BRAND_NAMES[DIRECTION_BRAND[ctx.directions[0]]] }), _jsxs("span", { className: "sr-only", children: [" ", ctx.t("opensInNewTab")] })] })) : null] }), showHours ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "flex flex-wrap items-baseline justify-between gap-3", children: _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("hours") }) }), ctx.hoursDisplay !== "none" ? (_jsx("ul", { className: "flex flex-col gap-1.5 text-lead", children: summary.map((s, i) => (_jsxs("li", { className: "flex justify-between gap-6 tabular", children: [_jsx("span", { className: "text-fg-muted", children: s.days }), _jsx("span", { className: s.closed ? "text-fg-subtle" : "text-fg", children: s.closed ? ctx.t("closedDay") : s.text })] }, i))) })) : null, ctx.showOpenNow ? _jsx(OpenNow, { hours: branch.hours, labels: ctx.openNow, locale: ctx.locale, now: ctx.now, className: "mt-2" }) : null] })) : null, _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("contactDetails") }), branch.phone ? (_jsx("a", { href: telHref(branch.phone), className: "self-start text-lead font-medium tabular text-fg hover:text-accent-ink focus-ring rounded-[2px]", "data-track": "call", children: prettyPhone(branch.phone) })) : null, branch.email ? (_jsx("a", { href: `mailto:${branch.email}`, className: "self-start text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": "email", children: branch.email })) : null] })] }));
+    return (_jsxs("div", { className: cn("grid gap-x-(--gutter) gap-y-10 border-t border-line pt-8", showHours ? "@2xl:grid-cols-3" : "@2xl:grid-cols-2"), children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("address") }), _jsx(AddressBlock, { branch: branch, ctx: ctx, large: true }), branch.notes ? _jsx("p", { className: "text-small text-fg-muted", children: branch.notes }) : null, ctx.directions[0] ? (_jsxs("a", { href: directionsUrl(ctx.directions[0], branch), target: "_blank", rel: "noopener noreferrer", className: "mt-1 inline-flex min-h-6 items-center self-start pointer-coarse:min-h-11 text-small font-medium text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": `directions:${ctx.directions[0]}`, children: [ctx.t("directionsVia", { provider: BRAND_NAMES[DIRECTION_BRAND[ctx.directions[0]]] }), _jsxs("span", { className: "sr-only", children: [" ", ctx.t("opensInNewTab")] })] })) : null] }), showHours ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "flex flex-wrap items-baseline justify-between gap-3", children: _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("hours") }) }), ctx.hoursDisplay !== "none" ? (_jsx("ul", { className: "flex flex-col gap-1.5 text-lead", children: summary.map((s, i) => (_jsxs("li", { className: "flex justify-between gap-6 tabular", children: [_jsx("span", { className: "text-fg-muted", children: s.days }), _jsx("span", { className: s.closed ? "text-fg-subtle" : "text-fg", children: s.closed ? ctx.t("closedDay") : s.text })] }, i))) })) : null, ctx.showOpenNow ? _jsx(OpenNow, { hours: branch.hours, labels: ctx.openNow, locale: ctx.locale, now: ctx.now, className: "mt-2" }) : null] })) : null, _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("contactDetails") }), branch.phone ? (_jsx("a", { href: telHref(branch.phone), className: cn(TAP, "self-start text-lead font-medium tabular text-fg hover:text-accent-ink focus-ring rounded-[2px]"), "data-track": "call", children: prettyPhone(branch.phone) })) : null, branch.email ? (_jsx("a", { href: `mailto:${branch.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: branch.email })) : null] })] }));
 }
 function BranchPicker({ branches, ctx, name }) {
     const list = branches.slice(0, 12);

package/dist/blocks/site/media-text.d.ts

@@ -22,7 +22,10 @@ export interface MediaTextProps extends Omit<BlockBaseProps, "variant" | "labels
     /** Short points with accent dashes (≤ 6). */
     bullets?: React.ReactNode[];
     cta?: SiteCta;
-    /** The image (also the video poster). */
+    /**
+     * The image (also the video poster). `sizes`: side `(min-width: 56rem) min(42vw, 32rem), 100vw` ·
+     * overlap `min(67vw, 51rem)` · bleed `59vw` (runs to the section edge); 100vw on narrow screens.
+     */
     media: SiteImage;
     /** Static preview → plays only after a click (YouTube via youtube-nocookie). */
     video?: MediaTextVideo;

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

@@ -8,6 +8,7 @@ import { RichText } from "../rich-text.js";
 import { EmbedFacade } from "./embed-facade.js";
 import { CtaList, siteText, useBlockIds } from "./_kit-1.js";
 import { Reveal } from "../../motion/reveal.js";
+import { columnSizes } from "./shared/image-sizes.js";
 /** Embed URL for a video facade (YouTube → youtube-nocookie, Vimeo → player). */
 export function videoEmbedUrl(v) {
     if (v.provider === "youtube") {
@@ -44,13 +45,13 @@ export function MediaText({ variant = "side", eyebrow, title, body, bullets, cta
     const text = (_jsxs("div", { className: "flex flex-col gap-7", children: [_jsx(SectionHeader, { eyebrow: eyebrow, title: title, headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale }), body ? _jsx(RichText, { doc: body, components: components, labels: labels, locale: locale, headingOffset: 1, editMode: editMode, field: "props.body", className: "text-fg-muted" }) : null, bullets?.length ? (_jsx("ul", { className: "flex flex-col border-t border-line", "data-field": editMode ? "props.bullets" : undefined, children: bullets.slice(0, 6).map((b, i) => (_jsxs("li", { className: "flex gap-4 border-b border-line py-3 text-body text-fg", children: [_jsx("span", { "aria-hidden": true, className: "mt-[0.8em] h-px w-4 shrink-0 bg-accent" }), _jsx("span", { children: b })] }, i))) })) : null, cta ? _jsx(CtaList, { actions: [cta], components: components, labels: labels, locale: locale, max: 1, editMode: editMode }) : null] }));
     let content;
     if (variant === "overlap") {
-        content = (_jsxs(Container, { className: "grid gap-y-0 @4xl:grid-cols-12 @4xl:pb-[calc(var(--section-y)*0.4)]", children: [_jsx("div", { className: cn("@4xl:col-span-8 @4xl:row-start-1", end && "@4xl:col-start-5"), children: image("(min-width: 56rem) 60vw, 100vw", "rounded-ui") }), _jsx("div", { className: cn("vb-overlap-panel surface relative -mt-12 mx-[clamp(0.75rem,3cqi,1.5rem)] rounded-ui p-[clamp(1.5rem,4cqi,3rem)] @4xl:row-start-1 @4xl:mx-0 @4xl:mt-0 @4xl:self-end @4xl:translate-y-[calc(var(--section-y)*0.35)]", end ? "@4xl:col-span-6 @4xl:col-start-1" : "@4xl:col-span-6 @4xl:col-start-7"), children: text })] }));
+        content = (_jsxs(Container, { className: "grid gap-y-0 @4xl:grid-cols-12 @4xl:pb-[calc(var(--section-y)*0.4)]", children: [_jsx("div", { className: cn("@4xl:col-span-8 @4xl:row-start-1", end && "@4xl:col-start-5"), children: image(columnSizes(8 / 12), "rounded-ui") }), _jsx("div", { className: cn("vb-overlap-panel surface relative -mt-12 mx-[clamp(0.75rem,3cqi,1.5rem)] rounded-ui p-[clamp(1.5rem,4cqi,3rem)] @4xl:row-start-1 @4xl:mx-0 @4xl:mt-0 @4xl:self-end @4xl:translate-y-[calc(var(--section-y)*0.35)]", end ? "@4xl:col-span-6 @4xl:col-start-1" : "@4xl:col-span-6 @4xl:col-start-7"), children: text })] }));
     }
     else if (variant === "bleed") {
-        content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: cn("@4xl:col-span-7", end ? "vb-bleed-end @4xl:order-2 @4xl:col-start-6" : "vb-bleed-start"), children: image("(min-width: 56rem) 60vw, 100vw") }), _jsx("div", { className: cn("@4xl:col-span-4 @4xl:pt-4", end ? "@4xl:order-1 @4xl:col-start-1" : "@4xl:col-start-9"), children: text })] }));
+        content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: cn("@4xl:col-span-7", end ? "vb-bleed-end @4xl:order-2 @4xl:col-start-6" : "vb-bleed-start"), children: image(columnSizes(7 / 12, { bleed: true })) }), _jsx("div", { className: cn("@4xl:col-span-4 @4xl:pt-4", end ? "@4xl:order-1 @4xl:col-start-1" : "@4xl:col-start-9"), children: text })] }));
     }
     else {
-        content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: cn("@4xl:col-span-5", end && "@4xl:order-2 @4xl:col-start-8"), children: image("(min-width: 56rem) 40vw, 100vw", "rounded-ui") }), _jsx("div", { className: cn("@4xl:col-span-6", end ? "@4xl:order-1 @4xl:col-start-1" : "@4xl:col-start-7"), children: text })] }));
+        content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: cn("@4xl:col-span-5", end && "@4xl:order-2 @4xl:col-start-8"), children: image(columnSizes(5 / 12), "rounded-ui") }), _jsx("div", { className: cn("@4xl:col-span-6", end ? "@4xl:order-1 @4xl:col-start-1" : "@4xl:col-start-7"), children: text })] }));
     }
     return (_jsx(Section, { theme: theme, anchor: anchor, headingId: headingId, blockId: base, blockType: "media-text", editMode: editMode, className: cn("vb-media-text", variant === "overlap" && "vb-media-overlap", className), "data-variant": variant, "data-side": mediaSide, children: _jsx(Reveal, { disabled: editMode, children: content }) }));
 }

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

@@ -4,7 +4,9 @@ import type { MoneyValue } from "../schema/types.js";
 import { type Site2BlockLabels } from "./shared/labels-2.js";
 import { type SiteImage2 } from "./shared/kit-2.js";
 export type MenuVariant = "classic" | "photo" | "service-list";
-export type MenuTag = "vegetarian" | "vegan" | "gluten-free" | "spicy" | "new" | "chef-pick";
+/** Dietary and house tags, rendered as words (never emoji). */
+export declare const MENU_TAGS: readonly ["vegetarian", "vegan", "gluten-free", "dairy-free", "nut-free", "halal", "spicy", "new", "chef-pick", "to-share", "seasonal"];
+export type MenuTag = (typeof MENU_TAGS)[number];
 /** The 14 EU / Codex allergens. */
 export declare const ALLERGENS: readonly ["gluten", "crustaceans", "eggs", "fish", "peanuts", "soybeans", "milk", "nuts", "celery", "mustard", "sesame", "sulphites", "lupin", "molluscs"];
 export type Allergen = (typeof ALLERGENS)[number];
@@ -23,7 +25,7 @@ export interface MenuItem {
     duration?: React.ReactNode;
     tags?: MenuTag[];
     allergens?: Allergen[];
-    /** Square photo (`photo` variant). */
+    /** Square photo (`photo` variant), 72px (`sizes="72px"`). */
     image?: SiteImage2;
     /** "Not today" — shown as a label, never a strikethrough. */
     unavailable?: boolean;
@@ -59,7 +61,9 @@ export interface MenuListProps extends Omit<BlockBaseProps, "variant" | "labels"
     labels?: Site2BlockLabels;
 }
 /**
- * Restaurant menus and spa/salon price lists — also a QR-menu page. Category jump bar with plain
+ * Restaurant menus and spa/salon price lists — also a whole menu page, so a site never has to
+ * link out to a third-party QR menu: pass `headingLevel={1}` and the title becomes the page `h1`,
+ * categories `h2`, dishes `h3`. Category jump bar with plain
  * anchors, money through `Intl` (full currency name for screen readers), tags as words (never
  * emoji), the 14 allergens localized. Server component, 0 JS.
  *

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

@@ -7,11 +7,35 @@ import { BlockImage } from "../block-image.js";
 import { BlockLink } from "../block-link.js";
 import { site2Text } from "./shared/labels-2.js";
 import { fieldAttr, formatMoney, formatMoneyLong, textOf, useBlockIds2 } from "./shared/kit-2.js";
+/** Dietary and house tags, rendered as words (never emoji). */
+export const MENU_TAGS = ["vegetarian", "vegan", "gluten-free", "dairy-free", "nut-free", "halal", "spicy", "new", "chef-pick", "to-share", "seasonal"];
 /** The 14 EU / Codex allergens. */
 export const ALLERGENS = ["gluten", "crustaceans", "eggs", "fish", "peanuts", "soybeans", "milk", "nuts", "celery", "mustard", "sesame", "sulphites", "lupin", "molluscs"];
-const TAG_KEY = { vegetarian: "tagVegetarian", vegan: "tagVegan", "gluten-free": "tagGlutenFree", spicy: "tagSpicy", new: "tagNew", "chef-pick": "tagChefPick" };
+const TAG_KEY = {
+    vegetarian: "tagVegetarian",
+    vegan: "tagVegan",
+    "gluten-free": "tagGlutenFree",
+    "dairy-free": "tagDairyFree",
+    "nut-free": "tagNutFree",
+    halal: "tagHalal",
+    spicy: "tagSpicy",
+    new: "tagNew",
+    "chef-pick": "tagChefPick",
+    "to-share": "tagToShare",
+    seasonal: "tagSeasonal",
+};
+const DIET = {
+    vegan: "https://schema.org/VeganDiet",
+    vegetarian: "https://schema.org/VegetarianDiet",
+    "gluten-free": "https://schema.org/GlutenFreeDiet",
+    "dairy-free": "https://schema.org/LowLactoseDiet",
+    halal: "https://schema.org/HalalDiet",
+};
+const hTag = (level) => `h${Math.min(6, Math.max(2, level))}`;
 /**
- * Restaurant menus and spa/salon price lists — also a QR-menu page. Category jump bar with plain
+ * Restaurant menus and spa/salon price lists — also a whole menu page, so a site never has to
+ * link out to a third-party QR menu: pass `headingLevel={1}` and the title becomes the page `h1`,
+ * categories `h2`, dishes `h3`. Category jump bar with plain
  * anchors, money through `Intl` (full currency name for screen readers), tags as words (never
  * emoji), the 14 allergens localized. Server component, 0 JS.
  *
@@ -25,10 +49,13 @@ export function MenuList({ variant = "classic", eyebrow, title, lead, categories
     const categories = all.filter((c) => c.items.length > 0 || editMode);
     const nav = showNav ?? categories.length > 2;
     const catId = (c, i) => c.anchor ?? `${slugify(textOf(c.title), { locale }) || "section"}-${i}`;
-    const ctx = { t, locale, components, labels, editMode, variant, bookHref, showAllergens };
+    // Outline follows the block title: h2 title → h3 categories → h4 dishes; h1 page title → h2 → h3.
+    const catLevel = title ? headingLevel + 1 : headingLevel;
+    const CatH = hTag(catLevel);
+    const ctx = { t, locale, components, labels, editMode, variant, bookHref, showAllergens, ItemH: hTag(catLevel + 1) };
     return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "menu", editMode: editMode, className: cn("vb-menu", className), "data-variant": variant, children: _jsxs(Container, { className: "flex flex-col gap-10 @4xl:gap-14", children: [title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, align: "split", editMode: editMode, labels: labels, locale: locale }) : null, nav ? (_jsx("nav", { "aria-label": t("menuCategories"), className: "vb-menu-nav sticky top-[var(--topbar-h,0px)] z-10 -mx-(--gutter) border-b border-line bg-scene px-(--gutter)", children: _jsx("ul", { className: "scrollbar-none flex gap-1 overflow-x-auto py-2", children: categories.map((c, i) => (_jsx("li", { className: "shrink-0", children: _jsx("a", { href: `#${base}-${catId(c, i)}`, className: "inline-flex h-10 items-center whitespace-nowrap rounded-full px-3.5 text-sm text-fg-muted transition-colors hover:bg-hover hover:text-fg focus-ring", children: c.title }) }, i))) }) })) : null, _jsx("div", { className: "flex flex-col gap-14 @4xl:gap-20", children: categories.map((c, ci) => {
                         const hid = `${base}-${catId(c, ci)}`;
-                        return (_jsxs("section", { id: hid, "aria-labelledby": `${hid}-h`, className: "vb-menu-cat flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2 border-t-[3px] border-double border-line pt-5 @2xl:flex-row @2xl:items-baseline @2xl:justify-between @2xl:gap-8", children: [_jsx("h3", { id: `${hid}-h`, className: "font-display text-display-m text-fg", ...fieldAttr(editMode, `categories.${ci}.title`), children: c.title }), c.note ? _jsx("p", { className: "max-w-[44ch] text-small text-fg-muted @2xl:text-end", children: c.note }) : null] }), variant === "service-list" ? (_jsx("ul", { className: "flex flex-col", children: c.items.map((item, ii) => (_jsx(ServiceRow, { item: item, ctx: ctx }, ii))) })) : (_jsx("ul", { className: cn("grid gap-x-(--gutter) gap-y-7", variant === "classic" && "@4xl:grid-cols-2 @4xl:gap-x-16"), children: c.items.map((item, ii) => (_jsx(DishItem, { item: item, ctx: ctx }, ii))) }))] }, ci));
+                        return (_jsxs("section", { id: hid, "aria-labelledby": `${hid}-h`, className: "vb-menu-cat flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2 border-t-[3px] border-double border-line pt-5 @2xl:flex-row @2xl:items-baseline @2xl:justify-between @2xl:gap-8", children: [_jsx(CatH, { id: `${hid}-h`, className: "font-display text-display-m text-fg", ...fieldAttr(editMode, `categories.${ci}.title`), children: c.title }), c.note ? _jsx("p", { className: "max-w-[44ch] text-small text-fg-muted @2xl:text-end", children: c.note }) : null] }), variant === "service-list" ? (_jsx("ul", { className: "flex flex-col", children: c.items.map((item, ii) => (_jsx(ServiceRow, { item: item, ctx: ctx }, ii))) })) : (_jsx("ul", { className: cn("grid gap-x-(--gutter) gap-y-7", variant === "classic" && "@4xl:grid-cols-2 @4xl:gap-x-16"), children: c.items.map((item, ii) => (_jsx(DishItem, { item: item, ctx: ctx }, ii))) }))] }, ci));
                     }) }), priceNote ? (_jsx("p", { className: "border-t border-line pt-5 text-small text-fg-muted", ...fieldAttr(editMode, "priceNote"), children: priceNote })) : null] }) }));
 }
 function Price({ price, ctx, className }) {
@@ -57,12 +84,12 @@ function Allergens({ item, ctx }) {
 }
 function DishItem({ item, ctx }) {
     const photo = ctx.variant === "photo";
-    return (_jsxs("li", { "data-unavailable": item.unavailable ? "" : undefined, className: cn("vb-menu-item flex gap-4", item.unavailable && "opacity-70"), children: [photo ? (item.image?.src ? (_jsx(BlockImage, { ...item.image, alt: item.image.alt ?? "", decorative: !item.image.alt, aspect: "1:1", sizes: "72px", className: "size-[72px] shrink-0 rounded-ui-sm", components: ctx.components })) : (_jsx("span", { "aria-hidden": true, className: "size-[72px] shrink-0" }))) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-baseline gap-3", children: [_jsx("h4", { className: "text-body font-medium text-fg", children: item.name }), !photo ? _jsx("span", { "aria-hidden": true, className: "vb-leader min-w-6 flex-1 translate-y-[-0.3em] border-b border-dotted border-fg-subtle" }) : _jsx("span", { className: "flex-1" }), _jsx(Prices, { item: item, ctx: ctx })] }), item.description ? _jsx("p", { className: "max-w-[56ch] text-small text-fg-muted text-pretty", children: item.description }) : null, _jsx(Tags, { item: item, ctx: ctx }), _jsx(Allergens, { item: item, ctx: ctx })] })] }));
+    return (_jsxs("li", { "data-unavailable": item.unavailable ? "" : undefined, className: cn("vb-menu-item flex gap-4", item.unavailable && "opacity-70"), children: [photo ? (item.image?.src ? (_jsx(BlockImage, { ...item.image, alt: item.image.alt ?? "", decorative: !item.image.alt, aspect: "1:1", sizes: "72px", className: "size-[72px] shrink-0 rounded-ui-sm", components: ctx.components })) : (_jsx("span", { "aria-hidden": true, className: "size-[72px] shrink-0" }))) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-baseline gap-3", children: [_jsx(ctx.ItemH, { className: "text-body font-medium text-fg", children: item.name }), !photo ? _jsx("span", { "aria-hidden": true, className: "vb-leader min-w-6 flex-1 translate-y-[-0.3em] border-b border-dotted border-fg-subtle" }) : _jsx("span", { className: "flex-1" }), _jsx(Prices, { item: item, ctx: ctx })] }), item.description ? _jsx("p", { className: "max-w-[56ch] text-small text-fg-muted text-pretty", children: item.description }) : null, _jsx(Tags, { item: item, ctx: ctx }), _jsx(Allergens, { item: item, ctx: ctx })] })] }));
 }
 function ServiceRow({ item, ctx }) {
     const href = item.bookHref ?? ctx.bookHref;
     const name = textOf(item.name);
-    return (_jsxs("li", { "data-unavailable": item.unavailable ? "" : undefined, className: "grid gap-x-(--gutter) gap-y-2 border-b border-line py-5 first:border-t @2xl:grid-cols-12 @2xl:items-baseline", children: [_jsxs("div", { className: "flex flex-col gap-1.5 @2xl:col-span-6", children: [_jsx("h4", { className: "text-body font-medium text-fg", children: item.name }), item.description ? _jsx("p", { className: "text-small text-fg-muted text-pretty", children: item.description }) : null, _jsx(Tags, { item: item, ctx: ctx })] }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted @2xl:col-span-2", children: item.prices.length === 1 ? item.duration : null }), _jsx("div", { className: "@2xl:col-span-3 @2xl:text-end", children: _jsx(Prices, { item: item, ctx: ctx }) }), _jsx("div", { className: "@2xl:col-span-1 @2xl:text-end", children: href && !item.unavailable ? (_jsx(BlockLink, { href: href, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": name ? ctx.t("bookService", { service: name }) : undefined, className: "text-small font-medium text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": "book", children: ctx.t("book") })) : null })] }));
+    return (_jsxs("li", { "data-unavailable": item.unavailable ? "" : undefined, className: "grid gap-x-(--gutter) gap-y-2 border-b border-line py-5 first:border-t @2xl:grid-cols-12 @2xl:items-baseline", children: [_jsxs("div", { className: "flex flex-col gap-1.5 @2xl:col-span-6", children: [_jsx(ctx.ItemH, { className: "text-body font-medium text-fg", children: item.name }), item.description ? _jsx("p", { className: "text-small text-fg-muted text-pretty", children: item.description }) : null, _jsx(Tags, { item: item, ctx: ctx })] }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted @2xl:col-span-2", children: item.prices.length === 1 ? item.duration : null }), _jsx("div", { className: "@2xl:col-span-3 @2xl:text-end", children: _jsx(Prices, { item: item, ctx: ctx }) }), _jsx("div", { className: "@2xl:col-span-1 @2xl:text-end", children: href && !item.unavailable ? (_jsx(BlockLink, { href: href, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": name ? ctx.t("bookService", { service: name }) : undefined, className: "inline-flex min-h-6 items-center text-small font-medium text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px] pointer-coarse:min-h-11", "data-track": "book", children: ctx.t("book") })) : null })] }));
 }
 /** schema.org `Menu` → `MenuSection` → `MenuItem` + `Offer`. */
 export function menuJsonLd(props) {
@@ -77,7 +104,7 @@ export function menuJsonLd(props) {
                 name: textOf(i.name),
                 description: textOf(i.description) || undefined,
                 offers: i.prices.filter((p) => p.amount).map((p) => ({ "@type": "Offer", price: p.amount.amount, priceCurrency: p.amount.currency, name: textOf(p.label) || undefined })),
-                suitableForDiet: (i.tags ?? []).flatMap((tag) => (tag === "vegan" ? ["https://schema.org/VeganDiet"] : tag === "vegetarian" ? ["https://schema.org/VegetarianDiet"] : tag === "gluten-free" ? ["https://schema.org/GlutenFreeDiet"] : [])),
+                suitableForDiet: (i.tags ?? []).flatMap((tag) => (DIET[tag] ? [DIET[tag]] : [])),
             })),
         })),
     };

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

@@ -28,6 +28,7 @@ export interface NavbarProps extends Omit<BlockBaseProps, "variant" | "labels">
      * rail: links inside one framed pill in the middle, "Sign in" + "Try free" at the end.
      */
     variant?: NavbarVariant;
+    /** Logo image (`sizes="12rem"`; the mark is 1.75rem tall). */
     logo?: SiteImage;
     /** Shown instead of `logo` inside dark sections / dark mode. */
     logoDark?: SiteImage;

package/dist/blocks/site/navbar.js

@@ -8,6 +8,7 @@ import { BlockLink } from "../block-link.js";
 import { SkipLink } from "../section.js";
 import { NavbarSubmenu } from "./navbar-submenu.js";
 import { CtaList, useBlockIds, siteText } from "./_kit-1.js";
+import { TAP } from "./shared/tap.js";
 /** National format in the number's own locale, international elsewhere ("0216 000 00 00" for tr). */
 export function formatSitePhone(e164, locale = "en-US") {
     const p = parsePhoneNumberFromString(e164);
@@ -34,16 +35,16 @@ export function Navbar({ variant = "bar", logo, logoDark, wordmark, homeHref = "
     const lang = baseLanguage(locale);
     const phoneText = phone ? formatSitePhone(phone, locale) : undefined;
     const linkProps = { components, labels, locale };
-    const brand = (_jsxs(BlockLink, { href: homeHref, ...linkProps, className: "vb-nav-brand flex shrink-0 items-center gap-3 rounded-[2px] focus-ring", children: [logo ? (_jsxs(_Fragment, { children: [_jsx(BlockImage, { ...logo, decorative: !!wordmark || logo.decorative, alt: wordmark ? undefined : logo.alt, priority: true, className: cn("vb-nav-logo", logoDark && "vb-logo-light"), components: components }), logoDark ? _jsx(BlockImage, { ...logoDark, decorative: true, priority: true, className: "vb-nav-logo vb-logo-dark", components: components }) : null] })) : null, wordmark || !logo ? (_jsx("span", { className: cn("vb-nav-wordmark font-display text-fg", variant === "split" ? "text-[1.625rem]" : "text-[1.375rem]"), "data-field": editMode ? "props.wordmark" : undefined, children: wordmark })) : null] }));
+    const brand = (_jsxs(BlockLink, { href: homeHref, ...linkProps, className: "vb-nav-brand flex min-h-6 shrink-0 items-center gap-3 pointer-coarse:min-h-11 rounded-[2px] focus-ring", children: [logo ? (_jsxs(_Fragment, { children: [_jsx(BlockImage, { ...logo, decorative: !!wordmark || logo.decorative, alt: wordmark ? undefined : logo.alt, priority: true, sizes: "12rem", className: cn("vb-nav-logo", logoDark && "vb-logo-light"), components: components }), logoDark ? _jsx(BlockImage, { ...logoDark, decorative: true, priority: true, sizes: "12rem", className: "vb-nav-logo vb-logo-dark", components: components }) : null] })) : null, wordmark || !logo ? (_jsx("span", { className: cn("vb-nav-wordmark font-display text-fg", variant === "split" ? "text-[1.625rem]" : "text-[1.375rem]"), "data-field": editMode ? "props.wordmark" : undefined, children: wordmark })) : null] }));
     const renderLink = (item, key, className) => (_jsx(BlockLink, { href: item.href, newTab: item.newTab, ...linkProps, "aria-current": isCurrent(item.href, currentPath) ? "page" : undefined, className: cn("vb-nav-link", className), children: item.label }, key));
     const desktopItem = (item, i) => item.children?.length ? (_jsx("li", { children: _jsx(NavbarSubmenu, { label: item.label, active: inGroup(item, currentPath), wide: item.children.some((c) => c.description), children: _jsx("ul", { className: cn("grid gap-0.5", item.children.some((c) => c.description) && "grid-cols-2"), children: item.children.map((c, j) => (_jsx("li", { children: _jsxs(BlockLink, { href: c.href, newTab: c.newTab, ...linkProps, "aria-current": isCurrent(c.href, currentPath) ? "page" : undefined, className: "vb-nav-sublink flex flex-col gap-0.5 rounded-ui-sm px-3 py-2.5 text-sm text-fg transition-colors hover:bg-hover focus-ring", children: [_jsx("span", { className: "font-medium", children: c.label }), c.description ? _jsx("span", { className: "text-small leading-snug text-fg-muted", children: c.description }) : null] }) }, j))) }) }) }, i)) : (_jsx("li", { children: renderLink(item, i) }, i));
     const linkList = (list, offset = 0, className) => (_jsx("ul", { className: cn("vb-nav-links hidden items-center @4xl:flex", variant === "rail" ? "gap-1" : "gap-7", className), children: list.map((it, i) => desktopItem(it, i + offset)) }));
-    const phoneLink = phone ? (_jsxs("a", { href: `tel:${phone}`, "aria-label": t("callUs", { phone: phoneText }), "data-track": "call", className: "vb-nav-phone hidden items-center gap-2 rounded-[2px] font-mono text-small tabular text-fg-muted transition-colors hover:text-fg focus-ring @6xl:inline-flex", children: [_jsx(Phone, { "aria-hidden": true, strokeWidth: 1.5, className: "size-3.5" }), phoneText] })) : null;
+    const phoneLink = phone ? (_jsxs("a", { href: `tel:${phone}`, "aria-label": t("callUs", { phone: phoneText }), "data-track": "call", className: "vb-nav-phone hidden min-h-6 items-center gap-2 rounded-[2px] font-mono text-small tabular text-fg-muted transition-colors hover:text-fg focus-ring @6xl:inline-flex", children: [_jsx(Phone, { "aria-hidden": true, strokeWidth: 1.5, className: "size-3.5" }), phoneText] })) : null;
     const localeSwitch = locales?.length ? (_jsx("ul", { "aria-label": t("languages"), className: "hidden items-center gap-1 font-mono text-eyebrow uppercase tracking-[0.08em] @4xl:flex", children: locales.map((l, i) => {
             const current = l.current ?? baseLanguage(l.code) === lang;
-            return (_jsxs("li", { className: "flex items-center gap-1", children: [i > 0 ? _jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: "/" }) : null, _jsx("a", { href: l.href, hrefLang: l.code, lang: l.code, "aria-current": current ? "true" : undefined, className: cn("rounded-[2px] px-0.5 transition-colors focus-ring", current ? "text-fg" : "text-fg-muted hover:text-fg"), children: l.code })] }, l.code));
+            return (_jsxs("li", { className: "flex items-center gap-1", children: [i > 0 ? _jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: "/" }) : null, _jsx("a", { href: l.href, hrefLang: l.code, lang: l.code, "aria-current": current ? "true" : undefined, className: cn("inline-flex min-h-6 min-w-6 items-center justify-center rounded-[2px] px-0.5 transition-colors focus-ring", current ? "text-fg" : "text-fg-muted hover:text-fg"), children: l.code })] }, l.code));
         }) })) : null;
-    const trigger = (always) => (_jsx("button", { type: "button", popoverTarget: panelId, "aria-haspopup": "dialog", "aria-controls": panelId, className: cn("vb-nav-trigger inline-flex h-10 items-center gap-2 rounded-ui px-2 text-sm font-medium text-fg transition-colors hover:bg-hover focus-ring", !always && "@4xl:hidden"), children: always ? (_jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.08em]", children: t("openMenu") })) : (_jsxs(_Fragment, { children: [_jsx(Menu, { "aria-hidden": true, strokeWidth: 1.5, className: "size-5" }), _jsx("span", { className: "sr-only", children: t("openMenu") })] })) }));
+    const trigger = (always) => (_jsx("button", { type: "button", popoverTarget: panelId, "aria-haspopup": "dialog", "aria-controls": panelId, className: cn("vb-nav-trigger inline-flex h-10 min-w-10 items-center justify-center gap-2 rounded-ui px-2 text-sm font-medium text-fg transition-colors hover:bg-hover focus-ring pointer-coarse:h-11 pointer-coarse:min-w-11", !always && "@4xl:hidden"), children: always ? (_jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.08em]", children: t("openMenu") })) : (_jsxs(_Fragment, { children: [_jsx(Menu, { "aria-hidden": true, strokeWidth: 1.5, className: "size-5" }), _jsx("span", { className: "sr-only", children: t("openMenu") })] })) }));
     const primaryAction = actions?.length ? _jsx(CtaList, { actions: actions, ...linkProps, size: "md", max: variant === "bar" || variant === "minimal" ? 1 : 2, className: "hidden flex-nowrap gap-x-2 @2xl:flex" }) : null;
     let row;
     if (variant === "split") {
@@ -60,5 +61,5 @@ export function Navbar({ variant = "bar", logo, logoDark, wordmark, homeHref = "
         row = (_jsxs(_Fragment, { children: [brand, linkList(items, 0, "ms-4"), _jsxs("div", { className: "ms-auto flex items-center gap-5", children: [phoneLink, localeSwitch, primaryAction, trigger(false)] })] }));
     }
     const panelLinkSize = variant === "minimal" ? "font-display text-display-l" : "font-display text-display-m";
-    return (_jsxs("header", { id: anchor, "data-variant": variant, "data-sticky": sticky ? "" : undefined, "data-overlay": overlay ? "" : undefined, "data-block-id": editMode ? id : undefined, className: cn("vb-navbar", overlay && "dark", className), children: [skipLink ? _jsx(SkipLink, { labels: labels, locale: locale }) : null, _jsx("nav", { "aria-label": t("mainNavigation"), className: cn("vb-container vb-navbar-row items-center", variant === "split" ? "grid grid-cols-[1fr_auto_1fr] gap-6" : "flex gap-6"), children: row }), _jsx("div", { id: panelId, popover: "auto", role: "dialog", "aria-label": t("menuDialog"), className: "vb-nav-panel", children: _jsxs("div", { className: "vb-container flex min-h-full flex-col", children: [_jsxs("div", { className: "vb-navbar-row flex items-center justify-between gap-6", children: [brand, _jsxs("button", { type: "button", popoverTarget: panelId, popoverTargetAction: "hide", className: "inline-flex h-10 items-center gap-2 rounded-ui px-2 text-fg transition-colors hover:bg-hover focus-ring", children: [_jsx("span", { className: variant === "minimal" ? "font-mono text-eyebrow uppercase tracking-[0.08em]" : "sr-only", children: t("closeMenu") }), _jsx(X, { "aria-hidden": true, strokeWidth: 1.5, className: "size-5" })] })] }), _jsx("ul", { className: "flex flex-col py-[clamp(1.5rem,6vh,4rem)]", children: items.map((it, i) => (_jsxs("li", { className: "border-b border-line", children: [renderLink(it, i, cn("vb-nav-panel-link block py-3 text-fg", panelLinkSize)), it.children?.length ? (_jsx("ul", { className: "flex flex-wrap gap-x-6 gap-y-2 pb-4", children: it.children.map((c, j) => (_jsx("li", { children: renderLink(c, j, "text-small text-fg-muted hover:text-fg") }, j))) })) : null] }, i))) }), _jsxs("div", { className: "mt-auto flex flex-col gap-8 pb-[max(2rem,env(safe-area-inset-bottom))]", children: [actions?.length ? _jsx(CtaList, { actions: actions, ...linkProps, size: "lg" }) : null, phone || panelMeta?.length || locales?.length ? (_jsxs("dl", { className: "grid gap-x-8 gap-y-4 border-t border-line pt-6 text-small sm:grid-cols-3", children: [phone ? (_jsxs("div", { children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("phoneLabel") }), _jsx("dd", { className: "mt-1", children: _jsx("a", { href: `tel:${phone}`, "data-track": "call", className: "tabular text-fg underline decoration-line underline-offset-4 focus-ring", children: phoneText }) })] })) : null, panelMeta?.map((m, i) => (_jsxs("div", { children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: m.label }), _jsx("dd", { className: "mt-1 text-fg", children: m.value })] }, i))), locales?.length ? (_jsxs("div", { children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("languages") }), _jsx("dd", { className: "mt-1 flex gap-3", children: locales.map((l) => (_jsx("a", { href: l.href, hrefLang: l.code, lang: l.code, "aria-current": (l.current ?? baseLanguage(l.code) === lang) ? "true" : undefined, className: "font-mono uppercase text-fg-muted aria-[current]:text-fg focus-ring", children: l.code }, l.code))) })] })) : null] })) : null] })] }) })] }));
+    return (_jsxs("header", { id: anchor, "data-variant": variant, "data-sticky": sticky ? "" : undefined, "data-overlay": overlay ? "" : undefined, "data-block-id": editMode ? id : undefined, className: cn("vb-navbar", overlay && "dark", className), children: [skipLink ? _jsx(SkipLink, { labels: labels, locale: locale }) : null, _jsx("nav", { "aria-label": t("mainNavigation"), className: cn("vb-container vb-navbar-row items-center", variant === "split" ? "grid grid-cols-[1fr_auto_1fr] gap-6" : "flex gap-6"), children: row }), _jsx("div", { id: panelId, popover: "auto", role: "dialog", "aria-label": t("menuDialog"), className: "vb-nav-panel", children: _jsxs("div", { className: "vb-container flex min-h-full flex-col", children: [_jsxs("div", { className: "vb-navbar-row flex items-center justify-between gap-6", children: [brand, _jsxs("button", { type: "button", popoverTarget: panelId, popoverTargetAction: "hide", className: "inline-flex h-10 min-w-10 items-center justify-center gap-2 rounded-ui px-2 text-fg transition-colors hover:bg-hover focus-ring pointer-coarse:h-11 pointer-coarse:min-w-11", children: [_jsx("span", { className: variant === "minimal" ? "font-mono text-eyebrow uppercase tracking-[0.08em]" : "sr-only", children: t("closeMenu") }), _jsx(X, { "aria-hidden": true, strokeWidth: 1.5, className: "size-5" })] })] }), _jsx("ul", { className: "flex flex-col py-[clamp(1.5rem,6vh,4rem)]", children: items.map((it, i) => (_jsxs("li", { className: "border-b border-line", children: [renderLink(it, i, cn("vb-nav-panel-link block py-3 text-fg", panelLinkSize)), it.children?.length ? (_jsx("ul", { className: "flex flex-wrap gap-x-6 gap-y-2 pb-4 pointer-coarse:gap-y-0", children: it.children.map((c, j) => (_jsx("li", { children: renderLink(c, j, cn(TAP, "text-small text-fg-muted hover:text-fg")) }, j))) })) : null] }, i))) }), _jsxs("div", { className: "mt-auto flex flex-col gap-8 pb-[max(2rem,env(safe-area-inset-bottom))]", children: [actions?.length ? _jsx(CtaList, { actions: actions, ...linkProps, size: "lg" }) : null, phone || panelMeta?.length || locales?.length ? (_jsxs("dl", { className: "grid gap-x-8 gap-y-4 border-t border-line pt-6 text-small sm:grid-cols-3", children: [phone ? (_jsxs("div", { children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("phoneLabel") }), _jsx("dd", { className: "mt-1", children: _jsx("a", { href: `tel:${phone}`, "data-track": "call", className: cn(TAP, "tabular text-fg underline decoration-line underline-offset-4 focus-ring"), children: phoneText }) })] })) : null, panelMeta?.map((m, i) => (_jsxs("div", { children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: m.label }), _jsx("dd", { className: "mt-1 text-fg", children: m.value })] }, i))), locales?.length ? (_jsxs("div", { children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("languages") }), _jsx("dd", { className: "mt-1 flex gap-3 pointer-coarse:gap-1", children: locales.map((l) => (_jsx("a", { href: l.href, hrefLang: l.code, lang: l.code, "aria-current": (l.current ?? baseLanguage(l.code) === lang) ? "true" : undefined, className: cn(TAP, "min-w-6 justify-center font-mono uppercase text-fg-muted aria-[current]:text-fg focus-ring pointer-coarse:min-w-11"), children: l.code }, l.code))) })] })) : null] })) : null] })] }) })] }));
 }

package/dist/blocks/site/not-found.js

@@ -7,6 +7,7 @@ import { BlockHeading } from "../block-heading.js";
 import { BlockLink } from "../block-link.js";
 import { site2Text } from "./shared/labels-2.js";
 import { fieldAttr, prettyPhone, telHref, useBlockIds2 } from "./shared/kit-2.js";
+import { headingLines } from "./shared/heading-lines.js";
 const KIND = {
     "404": { code: "notFoundCode", title: "notFoundTitle", text: "notFoundText" },
     "500": { code: "serverErrorCode", title: "serverErrorTitle", text: "serverErrorText" },
@@ -27,7 +28,7 @@ export function NotFound({ variant = "plain", kind = "404", title, text, links =
     const { base, headingId } = useBlockIds2(id, "not-found");
     const k = KIND[kind];
     const showLinks = variant === "links";
-    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: headingId, blockId: id, blockType: "not-found", editMode: editMode, className: cn("vb-not-found", className), "data-kind": kind, "data-variant": variant, children: _jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-14 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-8", children: [_jsxs("p", { className: "flex items-center gap-3 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: [_jsx("span", { className: "tabular text-fg", children: t(k.code) }), _jsx("span", { "aria-hidden": true, className: "h-px w-8 bg-current opacity-40" })] }), _jsx(BlockHeading, { id: headingId, level: headingLevel, size: "display-l", text: title ?? t(k.title), editMode: editMode, field: "props.title", labels: labels, locale: locale, className: "max-w-[20ch]" }), _jsx("p", { className: "max-w-[52ch] text-lead text-fg-muted text-pretty", ...fieldAttr(editMode, "text"), children: text ?? t(k.text) }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3 pt-2", children: [reset ? (_jsxs("button", { type: "button", onClick: reset, className: cn(buttonVariants({ variant: "primary", size: "lg" }), "vb-action-primary"), children: [_jsx(RotateCcw, { "aria-hidden": true, strokeWidth: 1.75 }), t("tryAgain")] })) : null, _jsxs(BlockLink, { href: homeHref, appearance: reset ? "link" : kind === "maintenance" && phone ? "secondary" : "primary", components: components, labels: labels, locale: locale, children: [t("backHome"), reset ? _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[1em] rtl:-scale-x-100" }) : null] }), kind === "maintenance" && phone ? (_jsx("a", { href: telHref(phone), className: cn(buttonVariants({ variant: "primary", size: "lg" }), "vb-action-primary tabular"), "data-track": "call", children: prettyPhone(phone) })) : null] })] }), showLinks ? (_jsxs("div", { className: "flex flex-col gap-10 border-t border-line pt-8 @4xl:col-span-12", children: [search ? (_jsxs("form", { role: "search", action: search.action, method: "get", className: "flex max-w-xl flex-col gap-2", children: [_jsx("label", { htmlFor: `${base}-q`, className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("searchSite") }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("span", { className: "relative flex-1", children: [_jsx(Search, { "aria-hidden": true, strokeWidth: 1.5, className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-fg-muted" }), _jsx("input", { id: `${base}-q`, type: "search", name: search.param ?? "q", placeholder: t("searchPlaceholder"), className: "h-12 w-full rounded-ui border border-field-border bg-field ps-9 pe-3 text-body text-fg placeholder:text-fg-subtle transition-colors hover:border-field-border-hover focus-ring" })] }), _jsx("button", { type: "submit", className: buttonVariants({ variant: "secondary", size: "lg" }), children: t("search") })] })] })) : null, links.length ? (_jsxs("nav", { "aria-labelledby": `${base}-pop`, className: "flex flex-col gap-4", children: [_jsx("p", { id: `${base}-pop`, className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("popularPages") }), _jsx("ul", { className: "grid gap-x-(--gutter) @2xl:grid-cols-2", children: links.slice(0, 6).map((l, i) => (_jsx("li", { className: "border-t border-line", children: _jsxs(BlockLink, { href: l.href, newTab: l.newTab, components: components, labels: labels, locale: locale, className: "group/nf flex items-center justify-between gap-4 py-4 text-body text-fg transition-colors hover:text-accent-ink focus-ring rounded-[2px]", children: [_jsx("span", { children: l.label }), _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.5, className: "size-4 text-fg-subtle transition-colors group-hover/nf:text-current rtl:-scale-x-100" })] }) }, i))) })] })) : null, phone && kind !== "maintenance" ? (_jsx("p", { className: "text-small text-fg-muted", children: t("stillStuck", { phone: "\u0000" })
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: headingId, blockId: id, blockType: "not-found", editMode: editMode, className: cn("vb-not-found", className), "data-kind": kind, "data-variant": variant, children: _jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-14 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-8", children: [_jsxs("p", { className: "flex items-center gap-3 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: [_jsx("span", { className: "tabular text-fg", children: t(k.code) }), _jsx("span", { "aria-hidden": true, className: "h-px w-8 bg-current opacity-40" })] }), _jsx(BlockHeading, { id: headingId, level: headingLevel, size: "display-l", text: headingLines(title ?? t(k.title)), editMode: editMode, field: "props.title", labels: labels, locale: locale, className: "max-w-[20ch]" }), _jsx("p", { className: "max-w-[52ch] text-lead text-fg-muted text-pretty", ...fieldAttr(editMode, "text"), children: text ?? t(k.text) }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3 pt-2", children: [reset ? (_jsxs("button", { type: "button", onClick: reset, className: cn(buttonVariants({ variant: "primary", size: "lg" }), "vb-action-primary"), children: [_jsx(RotateCcw, { "aria-hidden": true, strokeWidth: 1.75 }), t("tryAgain")] })) : null, _jsxs(BlockLink, { href: homeHref, appearance: reset ? "link" : kind === "maintenance" && phone ? "secondary" : "primary", components: components, labels: labels, locale: locale, children: [t("backHome"), reset ? _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[1em] rtl:-scale-x-100" }) : null] }), kind === "maintenance" && phone ? (_jsx("a", { href: telHref(phone), className: cn(buttonVariants({ variant: "primary", size: "lg" }), "vb-action-primary tabular"), "data-track": "call", children: prettyPhone(phone) })) : null] })] }), showLinks ? (_jsxs("div", { className: "flex flex-col gap-10 border-t border-line pt-8 @4xl:col-span-12", children: [search ? (_jsxs("form", { role: "search", action: search.action, method: "get", className: "flex max-w-xl flex-col gap-2", children: [_jsx("label", { htmlFor: `${base}-q`, className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("searchSite") }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("span", { className: "relative flex-1", children: [_jsx(Search, { "aria-hidden": true, strokeWidth: 1.5, className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-fg-muted" }), _jsx("input", { id: `${base}-q`, type: "search", name: search.param ?? "q", placeholder: t("searchPlaceholder"), className: "h-12 w-full rounded-ui border border-field-border bg-field ps-9 pe-3 text-body text-fg placeholder:text-fg-subtle transition-colors hover:border-field-border-hover focus-ring" })] }), _jsx("button", { type: "submit", className: buttonVariants({ variant: "secondary", size: "lg" }), children: t("search") })] })] })) : null, links.length ? (_jsxs("nav", { "aria-labelledby": `${base}-pop`, className: "flex flex-col gap-4", children: [_jsx("p", { id: `${base}-pop`, className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("popularPages") }), _jsx("ul", { className: "grid gap-x-(--gutter) @2xl:grid-cols-2", children: links.slice(0, 6).map((l, i) => (_jsx("li", { className: "border-t border-line", children: _jsxs(BlockLink, { href: l.href, newTab: l.newTab, components: components, labels: labels, locale: locale, className: "group/nf flex items-center justify-between gap-4 py-4 text-body text-fg transition-colors hover:text-accent-ink focus-ring rounded-[2px]", children: [_jsx("span", { children: l.label }), _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.5, className: "size-4 text-fg-subtle transition-colors group-hover/nf:text-current rtl:-scale-x-100" })] }) }, i))) })] })) : null, phone && kind !== "maintenance" ? (_jsx("p", { className: "text-small text-fg-muted", children: t("stillStuck", { phone: "\u0000" })
                                 .split("\u0000")
                                 .flatMap((part, i) => i === 0
                                 ? [part]

package/dist/blocks/site/page-intro.d.ts

@@ -20,6 +20,7 @@ export interface PageIntroProps extends Omit<BlockBaseProps, "variant" | "labels
     /** The page `h1` (inner pages). One `*emphasis*`. */
     title: React.ReactNode;
     lead?: React.ReactNode;
+    /** 21:9 band under the intro. `sizes`: `min(100vw, 90rem)`. */
     media?: SiteImage;
     /** ruled: facts on the end side ("Service area" · "Asian side"), up to 3. */
     meta?: SiteMeta[];

package/dist/blocks/site/page-intro.js

@@ -5,6 +5,7 @@ import { BlockHeading } from "../block-heading.js";
 import { BlockImage } from "../block-image.js";
 import { BlockLink } from "../block-link.js";
 import { field, siteText, useBlockIds } from "./_kit-1.js";
+import { headingLines } from "./shared/heading-lines.js";
 /** `BreadcrumbList` JSON-LD for the crumbs (absolute URLs need `origin`). */
 export function breadcrumbJsonLd(crumbs, origin = "") {
     if (!crumbs.length)
@@ -31,7 +32,7 @@ export function PageIntro({ variant = "simple", breadcrumb, eyebrow, title, lead
                 const last = i === breadcrumb.length - 1;
                 return (_jsxs("li", { className: "flex items-center gap-2", children: [i > 0 ? (_jsx("span", { "aria-hidden": true, className: "text-fg-subtle/70 rtl:-scale-x-100", children: "/" })) : null, c.href && !last ? (_jsx(BlockLink, { href: c.href, ...linkProps, className: "rounded-[2px] transition-colors hover:text-fg focus-ring", children: c.label })) : (_jsx("span", { "aria-current": last ? "page" : undefined, className: last ? "text-fg-muted" : undefined, children: c.label }))] }, i));
             }) }) })) : eyebrow ? (_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", ...field(editMode, "eyebrow"), children: eyebrow })) : null;
-    const heading = _jsx(BlockHeading, { id: headingId, level: headingLevel, size: "display-l", text: title, editMode: editMode, field: "props.title", labels: labels, locale: locale, className: "max-w-[20ch]" });
+    const heading = _jsx(BlockHeading, { id: headingId, level: headingLevel, size: "display-l", text: headingLines(title), editMode: editMode, field: "props.title", labels: labels, locale: locale, className: "max-w-[20ch]" });
     const leadEl = lead ? (_jsx("p", { className: "vb-lead max-w-[52ch] text-lead text-fg-muted", ...field(editMode, "lead"), children: lead })) : null;
     let content;
     if (variant === "ruled") {

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

@@ -8,6 +8,7 @@ export interface StepsItem {
     text?: React.ReactNode;
     /** "1–2 weeks", "45 min". */
     duration?: React.ReactNode;
+    /** 3:2 step photo, max 28rem wide. `sizes`: `(min-width: 56rem) min(34vw, 26rem), min(100vw, 28rem)`. */
     media?: SiteImage;
 }
 export interface StepsProps extends Omit<BlockBaseProps, "variant" | "labels"> {

package/dist/blocks/site/process.js

@@ -5,6 +5,7 @@ import { SectionHeader } from "../section-header.js";
 import { BlockImage } from "../block-image.js";
 import { CtaList, indexLabel, useBlockIds } from "./_kit-1.js";
 import { Reveal } from "../../motion/reveal.js";
+import { columnSizes } from "./shared/image-sizes.js";
 /**
  * "How we work" — discovery → design → launch; a first spa visit; SaaS setup. An ordered list
  * (the order is announced; the numbers are visual). Server component.
@@ -25,7 +26,7 @@ export function Steps({ variant = "vertical", eyebrow, title, lead, steps, actio
         return (_jsx(Tag, { className: cn("text-body text-fg-muted text-pretty", Tag === "p" ? "max-w-[52ch]" : "flex min-w-0 flex-col gap-3"), ...f(i, "text"), children: s.text }));
     };
     const duration = (s, i) => s.duration ? (_jsx("span", { className: "inline-flex w-fit items-center rounded-full border border-line px-2.5 py-0.5 font-mono text-[0.6875rem] tabular tracking-[0.04em] text-fg-muted", ...f(i, "duration"), children: s.duration })) : null;
-    const media = (s) => (s.media ? _jsx(BlockImage, { ...s.media, aspect: "3:2", sizes: "(min-width: 56rem) 30vw, 100vw", className: "mt-2 max-w-md rounded-ui", components: components, labels: labels }) : null);
+    const media = (s) => (s.media ? _jsx(BlockImage, { ...s.media, aspect: "3:2", sizes: columnSizes(4 / 12, { narrow: "min(100vw, 28rem)" }), className: "mt-2 max-w-md rounded-ui", components: components, labels: labels }) : null);
     const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, align: variant === "horizontal" && lead ? "split" : "start", headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale }) : null;
     const actionsEl = actions?.length ? _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode }) : null;
     let content;

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

@@ -535,7 +535,7 @@ export declare const mediaTextBlock: import("../schema/index.js").BlockDefinitio
         "4:5": "4:5";
         "3:2": "3:2";
     }>>;
-}, z.core.$strip>, "side" | "overlap" | "bleed">;
+}, z.core.$strip>, "side" | "bleed" | "overlap">;
 export declare const ctaBlock: import("../schema/index.js").BlockDefinition<z.ZodObject<{
     eyebrow: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodRecord<z.ZodString, z.ZodString>]>>;
     title: z.ZodUnion<readonly [z.ZodString, z.ZodRecord<z.ZodString, z.ZodString>]>;

package/dist/blocks/site/registry-2.d.ts

@@ -589,9 +589,14 @@ export declare const menuBlock: import("../schema/index.js").BlockDefinition<z.Z
                 vegetarian: "vegetarian";
                 vegan: "vegan";
                 "gluten-free": "gluten-free";
+                "dairy-free": "dairy-free";
+                "nut-free": "nut-free";
+                halal: "halal";
                 spicy: "spicy";
                 new: "new";
                 "chef-pick": "chef-pick";
+                "to-share": "to-share";
+                seasonal: "seasonal";
             }>>>;
             allergens: z.ZodOptional<z.ZodArray<z.ZodEnum<{
                 sesame: "sesame";

package/dist/blocks/site/registry-2.js

@@ -10,7 +10,7 @@ import { BlogList } from "./blog-list.js";
 import { ArticleLayout } from "./article-layout.js";
 import { ContactForm } from "./contact-form.js";
 import { MapHours, localBusinessJsonLd } from "./map-hours.js";
-import { MenuList, menuJsonLd, ALLERGENS } from "./menu-list.js";
+import { MenuList, menuJsonLd, ALLERGENS, MENU_TAGS } from "./menu-list.js";
 import { GallerySection } from "./gallery-section.js";
 import { ConsentBanner } from "./consent-banner.js";
 import { ContactDock } from "./contact-dock.js";
@@ -367,7 +367,7 @@ const MenuItemSchema = f.group({
     description: f.text({ max: 160 }).optional(),
     prices: f.list(f.group({ label: f.text({ max: 20 }).optional(), amount: f.money().optional() }), { min: 1, max: 4 }),
     duration: f.text({ max: 12 }).optional(),
-    tags: z.array(z.enum(["vegetarian", "vegan", "gluten-free", "spicy", "new", "chef-pick"])).optional(),
+    tags: z.array(z.enum(MENU_TAGS)).optional(),
     allergens: z.array(z.enum(ALLERGENS)).optional(),
     image: f.image({ aspect: "1:1" }).optional(),
     unavailable: f.toggle().optional(),

package/dist/blocks/site/rich-text-section.js

@@ -4,6 +4,7 @@ import { Container, Section } from "../section.js";
 import { BlockHeading } from "../block-heading.js";
 import { RichText } from "../rich-text.js";
 import { field, useBlockIds } from "./_kit-1.js";
+import { headingLines } from "./shared/heading-lines.js";
 /**
  * Long text — an about page, a privacy notice, a service description. Pure server rendering of
  * the RichDoc format; no editor code reaches the site.
@@ -15,7 +16,7 @@ import { field, useBlockIds } from "./_kit-1.js";
 export function RichTextSection({ variant = "column", eyebrow, title, body, dropCap, note, size = "md", id, theme, anchor, className, headingLevel = 2, labels, locale, components, editMode }) {
     const { base, headingId } = useBlockIds(id, "text");
     const offset = (title ? 1 : 0);
-    const heading = title ? _jsx(BlockHeading, { id: headingId, level: headingLevel, size: "display-m", text: title, editMode: editMode, field: "props.title", labels: labels, locale: locale }) : null;
+    const heading = title ? _jsx(BlockHeading, { id: headingId, level: headingLevel, size: "display-m", text: headingLines(title), editMode: editMode, field: "props.title", labels: labels, locale: locale }) : null;
     const eyebrowEl = eyebrow ? (_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", ...field(editMode, "eyebrow"), children: eyebrow })) : null;
     const text = (cls) => (_jsx(RichText, { doc: body, size: size, headingOffset: offset, components: components, labels: labels, locale: locale, editMode: editMode, field: "props.body", className: cls }));
     let content;

package/dist/blocks/site/shared/heading-lines.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/**
+ * A heading string with hand-set line breaks: `"Ateşte közde,\nmuhabbet sofrada."`. Each line is
+ * a block `<span>` and the lines are joined by a real space, so `textContent` (search engines,
+ * screen readers, reader mode, copy-paste) reads "közde, muhabbet", never "közde,muhabbet".
+ * `*emphasis*` works across and within lines. Strings without `\n` and ReactNodes pass through
+ * unchanged (BlockHeading renders their emphasis). Server-safe.
+ */
+export declare function headingLines(text: React.ReactNode): React.ReactNode;

package/dist/blocks/site/shared/heading-lines.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { parseEmphasis } from "../../schema/emphasis.js";
+/**
+ * A heading string with hand-set line breaks: `"Ateşte közde,\nmuhabbet sofrada."`. Each line is
+ * a block `<span>` and the lines are joined by a real space, so `textContent` (search engines,
+ * screen readers, reader mode, copy-paste) reads "közde, muhabbet", never "közde,muhabbet".
+ * `*emphasis*` works across and within lines. Strings without `\n` and ReactNodes pass through
+ * unchanged (BlockHeading renders their emphasis). Server-safe.
+ */
+export function headingLines(text) {
+    if (typeof text !== "string" || !text.includes("\n"))
+        return text;
+    const lines = [[]];
+    for (const part of parseEmphasis(text)) {
+        part.text.split("\n").forEach((chunk, i) => {
+            if (i > 0)
+                lines.push([]);
+            if (chunk)
+                lines[lines.length - 1].push({ text: chunk, em: part.em });
+        });
+    }
+    const filled = lines
+        .map((parts) => parts.map((p, i, all) => {
+        let t = i === 0 ? p.text.trimStart() : p.text;
+        if (i === all.length - 1)
+            t = t.trimEnd();
+        return { ...p, text: t };
+    }).filter((p) => p.text))
+        .filter((parts) => parts.length);
+    return filled.map((parts, i) => (_jsxs(React.Fragment, { children: [i > 0 ? " " : null, _jsx("span", { className: "vb-heading-line block", children: parts.map((p, j) => (p.em ? _jsx("em", { children: p.text }, j) : _jsx(React.Fragment, { children: p.text }, j))) })] }, i)));
+}

package/dist/blocks/site/shared/image-sizes.d.ts

@@ -0,0 +1,25 @@
+/** `--container` (76rem) — the content column every Container caps at. */
+export declare const CONTAINER_REM = 76;
+/**
+ * A column that spans `fraction` of the container from `from` up, and `narrow` below.
+ * `columnSizes(5 / 12)` → `"(min-width: 56rem) min(42vw, 32rem), 100vw"`.
+ */
+export declare function columnSizes(fraction: number, opts?: {
+    from?: "42rem" | "56rem";
+    narrow?: string;
+    bleed?: boolean;
+}): string;
+/** Common presets. */
+export declare const SITE_SIZES: {
+    /** Edge-to-edge photo (full-bleed hero, editorial strip). */
+    readonly bleed: "100vw";
+    /** A photo as wide as the content container. */
+    readonly container: "min(100vw, 76rem)";
+    /** A photo only shown on narrow containers (< 56rem), full width there. */
+    readonly narrowOnly: "min(100vw, 56rem)";
+};
+/**
+ * Filmstrip cell: fixed height `clamp(15rem, 38cqi, 30rem)`, width = height × ratio.
+ * `filmstripSizes(4 / 5)` → `"max(12rem, min(31vw, 24rem))"`.
+ */
+export declare function filmstripSizes(ratio: number): string;