@vamos-ui/react 0.3.0 → 0.4.1

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

@@ -2,6 +2,7 @@
 // team, blog list, article, contact form, map & hours, menu, gallery, consent, contact dock,
 // footer, 404. Server / admin only — this file imports zod; components never import it.
 import { z, f, defineBlock, createRegistry } from "../schema/index.js";
+import * as React from "react";
 import { PricingTable } from "./pricing-table.js";
 import { ComparisonTable } from "./comparison-table.js";
 import { Testimonials } from "./testimonials.js";
@@ -10,7 +11,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 +368,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(),
@@ -518,7 +519,8 @@ export const footerBlock = defineBlock({
     },
     jsonLd: (p) => ({ "@type": "Organization", name: p.company?.legalName ?? p.brand.name, telephone: p.contact?.phone, email: p.contact?.email, sameAs: p.social.map((s) => s.href) }),
     lint: (p) => (!p.company ? [{ code: "missing-company-details", severity: "info", message: "Sites that sell online usually must show the legal name and tax / registry numbers in the footer.", path: "props.company" }] : []),
-    component: asBlock(Footer),
+    // The renderer emits the definition's jsonLd once per page; the component must not repeat it.
+    component: asBlock((p) => React.createElement(Footer, { ...p, jsonLd: false })),
 });
 /* ------------------------------------------------------------------ 404 */
 export const notFoundBlock = defineBlock({

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;

package/dist/blocks/site/shared/image-sizes.js

@@ -0,0 +1,37 @@
+// Responsive `sizes` for site-block photos. Every photo in a site block passes one of these to
+// BlockImage → the kit Image / `components.Image` (e.g. next/image), so a CDN loader picks a
+// 400–800 px file on a phone instead of the 3840 px top step. Fractions follow the block's 12-col
+// grid and are capped at the content container (`--container`, 76rem): a 2560 px monitor does
+// not fetch a 1500 px file for a 33% column that is never wider than 25rem.
+// Server-safe, no React.
+/** `--container` (76rem) — the content column every Container caps at. */
+export 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 function columnSizes(fraction, opts = {}) {
+    const { from = "56rem", narrow = "100vw", bleed = false } = opts;
+    const vw = Math.ceil(fraction * 100);
+    // A column bleeding to the section edge grows past the container on very wide screens.
+    const wide = bleed ? `${vw}vw` : `min(${vw}vw, ${Math.ceil(fraction * CONTAINER_REM)}rem)`;
+    return `(min-width: ${from}) ${wide}, ${narrow}`;
+}
+/** Common presets. */
+export const SITE_SIZES = {
+    /** Edge-to-edge photo (full-bleed hero, editorial strip). */
+    bleed: "100vw",
+    /** A photo as wide as the content container. */
+    container: `min(100vw, ${CONTAINER_REM}rem)`,
+    /** A photo only shown on narrow containers (< 56rem), full width there. */
+    narrowOnly: "min(100vw, 56rem)",
+};
+/**
+ * Filmstrip cell: fixed height `clamp(15rem, 38cqi, 30rem)`, width = height × ratio.
+ * `filmstripSizes(4 / 5)` → `"max(12rem, min(31vw, 24rem))"`.
+ */
+export function filmstripSizes(ratio) {
+    const r = ratio > 0 ? ratio : 0.8;
+    const n = (x) => Math.round(x * 10) / 10;
+    return `max(${n(15 * r)}rem, min(${Math.ceil(38 * r)}vw, ${n(30 * r)}rem))`;
+}

package/dist/blocks/site/shared/island-keys.d.ts

@@ -1,6 +1,6 @@
 export declare const carouselLabelKeys: readonly ["previous", "next", "slideCounter", "slideLabel", "carousel", "slide"];
 export type CarouselLabels = Record<(typeof carouselLabelKeys)[number], string>;
-export declare const openNowLabelKeys: readonly ["openNow", "closesAt", "closingSoon", "closed", "closedToday", "opensAt", "opensTodayAt", "open24h", "today"];
+export declare const openNowLabelKeys: readonly ["openNow", "openUntil", "closingSoon", "closingSoonUntil", "openAllDay", "closed", "closedToday", "opensAt", "opensTodayAt", "opensTomorrowAt"];
 export type OpenNowLabels = Record<(typeof openNowLabelKeys)[number], string>;
 export declare const contactIslandLabelKeys: readonly ["send", "sending", "sent", "optional", "errorSummary", "errorServer", "errorServerCall", "privacyRead", "privacyLink", "privacyRequired", "marketingConsent", "honeypot", "choose", "errorRequired", "errorEmail", "errorPhone", "errorTooLong"];
 export type ContactIslandLabels = Record<(typeof contactIslandLabelKeys)[number], string>;

package/dist/blocks/site/shared/island-keys.js

@@ -1,7 +1,7 @@
 // Label keys each client island needs. Kept out of the "use client" files: a server component
 // importing a plain value from a client module would receive a client reference, not the array.
 export const carouselLabelKeys = ["previous", "next", "slideCounter", "slideLabel", "carousel", "slide"];
-export const openNowLabelKeys = ["openNow", "closesAt", "closingSoon", "closed", "closedToday", "opensAt", "opensTodayAt", "open24h", "today"];
+export const openNowLabelKeys = ["openNow", "openUntil", "closingSoon", "closingSoonUntil", "openAllDay", "closed", "closedToday", "opensAt", "opensTodayAt", "opensTomorrowAt"];
 export const contactIslandLabelKeys = [
     "send",
     "sending",

package/dist/blocks/site/shared/labels-2.d.ts

@@ -86,12 +86,15 @@ export declare const site2Labels: {
     email: string;
     hours: string;
     openNow: string;
-    closesAt: string;
+    openUntil: string;
     closingSoon: string;
+    closingSoonUntil: string;
+    openAllDay: string;
     closed: string;
     closedToday: string;
     opensAt: string;
     opensTodayAt: string;
+    opensTomorrowAt: string;
     open24h: string;
     openingHours: string;
     openingHoursOf: string;
@@ -119,6 +122,11 @@ export declare const site2Labels: {
     tagSpicy: string;
     tagNew: string;
     tagChefPick: string;
+    tagDairyFree: string;
+    tagNutFree: string;
+    tagHalal: string;
+    tagToShare: string;
+    tagSeasonal: string;
     allergen_gluten: string;
     allergen_crustaceans: string;
     allergen_eggs: string;
@@ -196,6 +204,14 @@ export declare const site2Labels: {
 export type Site2Labels = typeof site2Labels;
 /** Turkish dictionary. Legal-flavoured texts are neutral templates — review with counsel. */
 export declare const site2LabelsTr: Site2Labels;
+/** German dictionary. Legal-flavoured texts are neutral templates — review with counsel. */
+export declare const site2LabelsDe: Site2Labels;
+/** French dictionary. Legal-flavoured texts are neutral templates — review with counsel. */
+export declare const site2LabelsFr: Site2Labels;
+/** Spanish dictionary. Legal-flavoured texts are neutral templates — review with counsel. */
+export declare const site2LabelsEs: Site2Labels;
+/** Arabic dictionary (Modern Standard Arabic). Legal-flavoured texts are neutral templates — review with counsel. */
+export declare const site2LabelsAr: Site2Labels;
 /** Labels accepted by every registry-2 block: infrastructure + these keys. */
 export type Site2BlockLabels = Partial<BlockLabels & Site2Labels>;
 export type Site2Key = keyof (BlockLabels & Site2Labels);