@vamos-ui/react 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { Section, Container } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { BlockImage } from "../block-image.js";
+import { labelTemplates, site2Text } from "./shared/labels-2.js";
+import { addressLines, fieldAttr, prettyPhone, telHref, useBlockIds2 } from "./shared/kit-2.js";
+import { openingHoursJsonLd, weekRows, summarizeHours } from "./shared/opening-hours.js";
+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";
+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). */
+export function directionsUrl(provider, b) {
+    const q = encodeURIComponent(query(b));
+    const geo = b.address.geo;
+    switch (provider) {
+        case "google":
+            return `https://www.google.com/maps/dir/?api=1&destination=${q}`;
+        case "apple":
+            return `https://maps.apple.com/?daddr=${q}`;
+        case "yandex":
+            return geo ? `https://yandex.com/maps/?rtext=~${geo.lat}%2C${geo.lng}` : `https://yandex.com/maps/?text=${q}`;
+        case "waze":
+            return geo ? `https://waze.com/ul?ll=${geo.lat}%2C${geo.lng}&navigate=yes` : `https://waze.com/ul?q=${q}&navigate=yes`;
+    }
+}
+/** Keyless embed URL (Google `output=embed` or an OpenStreetMap export frame). */
+export function mapEmbedUrl(b, provider = "google") {
+    if (b.mapEmbedUrl)
+        return b.mapEmbedUrl;
+    if (provider === "osm") {
+        const g = b.address.geo;
+        if (!g)
+            return undefined;
+        const d = 0.004;
+        return `https://www.openstreetmap.org/export/embed.html?bbox=${g.lng - d}%2C${g.lat - d}%2C${g.lng + d}%2C${g.lat + d}&layer=mapnik&marker=${g.lat}%2C${g.lng}`;
+    }
+    return `https://www.google.com/maps?q=${encodeURIComponent(query(b))}&z=16&output=embed`;
+}
+/** schema.org LocalBusiness (or a subtype) per branch — usable without the renderer. */
+export function localBusinessJsonLd(props) {
+    return props.branches.map((b) => ({
+        "@type": props.businessType ?? "LocalBusiness",
+        name: b.name,
+        telephone: b.phone,
+        email: b.email,
+        address: {
+            "@type": "PostalAddress",
+            streetAddress: b.address.line,
+            addressLocality: b.address.district ?? b.address.city,
+            addressRegion: b.address.region ?? b.address.city,
+            postalCode: b.address.postalCode,
+            addressCountry: b.address.country,
+        },
+        geo: b.address.geo ? { "@type": "GeoCoordinates", latitude: b.address.geo.lat, longitude: b.address.geo.lng } : undefined,
+        hasMap: b.placeUrl,
+        openingHoursSpecification: openingHoursJsonLd(b.hours),
+    }));
+}
+/**
+ * Address, map, opening hours and directions for a local business — the most visited section of
+ * restaurant, spa and clinic sites, and the source of LocalBusiness SEO. The map is a facade (no
+ * Maps JS API, no key); the iframe loads after a click or functional consent. "Open now" is a
+ * client island computed in the business's time zone. Server component.
+ *
+ * ```tsx
+ * <MapHours title="Find *us*" branches={[{ name: "Meyhane Rasimpaşa", address, phone: "+902160000000", hours, mapImage }]} directions={["google", "apple", "yandex"]} />
+ * ```
+ */
+export function MapHours({ variant: variantProp = "map-split", eyebrow, title, lead, branches, businessType, mapProvider = "google", directions = ["google", "apple"], showOpenNow = true, hoursDisplay = "week", now, id, anchor, theme, headingLevel = 2, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { base, headingId } = useBlockIds2(id, "location");
+    const first = branches[0];
+    let variant = variantProp;
+    if (variant === "branches" && branches.length < 2)
+        variant = "map-split";
+    if (variant === "map-split" && (!first?.mapImage?.src || mapProvider === "none"))
+        variant = "info";
+    const ctx = { t, locale, components, labels, editMode, now, showOpenNow, hoursDisplay, directions, mapProvider, openNow: labelTemplates(labels, openNowLabelKeys) };
+    const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale }) : null;
+    if (!first)
+        return null;
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "location", editMode: editMode, className: cn("vb-location", className), "data-variant": variant, "data-business": businessType, children: _jsx(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: variant === "map-split" ? (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12", children: [_jsx("div", { className: "@4xl:col-span-7", children: _jsx(MapFacade, { branch: first, ctx: ctx }) }), _jsxs("div", { className: "flex flex-col gap-8 @4xl:col-span-5", children: [header, _jsx(BranchDetails, { branch: first, ctx: ctx, index: 0 })] })] })) : variant === "info" ? (_jsxs(_Fragment, { children: [header, _jsx(InfoColumns, { branch: first, ctx: ctx })] })) : (_jsxs(_Fragment, { children: [header, _jsx(BranchPicker, { branches: branches, ctx: ctx, name: `${base}-branch` })] })) }) }));
+}
+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;
+    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 }));
+}
+/**
+ * Weekly hours as a table; today is bold with `aria-current="date"`, special days show their note.
+ * `openDaysOnly` leaves out closed days that carry no note.
+ */
+export function HoursTable({ hours, caption, t, locale, now, openDaysOnly, className }) {
+    const all = weekRows(hours, { locale, at: now ?? Date.now() });
+    const rows = openDaysOnly ? all.filter((r) => !r.closed || r.note) : all;
+    if (!rows.length)
+        return null;
+    return (_jsxs("table", { className: cn("vb-hours w-full border-collapse text-small", className), children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("tbody", { children: rows.map((r) => (_jsxs("tr", { "aria-current": r.today ? "date" : undefined, className: cn("border-b border-line last:border-b-0", r.today && "font-medium text-fg"), children: [_jsxs("th", { scope: "row", className: cn("py-2.5 pe-4 text-start font-normal", r.today ? "font-medium text-fg" : "text-fg-muted"), children: [r.label, r.today ? _jsx("span", { className: "ms-2 font-mono text-eyebrow uppercase tracking-[0.06em] text-accent-ink", children: t("today") }) : null] }), _jsxs("td", { className: cn("py-2.5 text-end tabular", r.closed ? "text-fg-subtle" : "text-fg"), children: [r.closed ? t("closedDay") : r.allDay ? t("open24h") : r.text, r.note ? _jsx("span", { className: "block text-xs text-fg-muted", children: r.note }) : null] })] }, r.weekday))) })] }));
+}
+function Directions({ branch, ctx }) {
+    if (!ctx.directions.length)
+        return null;
+    return (_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("directions") }), _jsx("ul", { className: "flex flex-wrap gap-2", children: ctx.directions.map((p) => (_jsx("li", { children: _jsxs("a", { href: directionsUrl(p, branch), target: "_blank", rel: "noopener noreferrer", "data-track": `directions:${p}`, className: "inline-flex h-11 items-center gap-2 rounded-ui border border-line px-3.5 text-sm text-fg transition-colors hover:border-fg focus-ring", children: [_jsx(BrandIcon, { name: DIRECTION_BRAND[p], className: "size-4 text-fg-muted" }), BRAND_NAMES[DIRECTION_BRAND[p]], _jsxs("span", { className: "sr-only", children: [" ", ctx.t("opensInNewTab")] })] }) }, p))) })] }));
+}
+function AddressBlock({ branch, ctx, large }) {
+    return (_jsx("address", { className: cn("not-italic text-fg", large ? "text-lead" : "text-body"), children: addressLines(branch.address, { locale: ctx.locale }).map((l, i) => (_jsx("span", { className: "block", children: l }, i))) }));
+}
+function BranchDetails({ branch, ctx, index }) {
+    return (_jsxs("div", { className: "flex flex-col gap-7", children: [_jsxs("div", { className: "flex flex-col gap-3", ...fieldAttr(ctx.editMode, `branches.${index}.address`), children: [_jsx(AddressBlock, { branch: branch, ctx: ctx, large: true }), branch.notes ? _jsx("p", { className: "text-small text-fg-muted", children: branch.notes }) : null, branch.phone ? (_jsx("a", { href: telHref(branch.phone), className: "self-start text-body font-medium tabular text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": "call", children: prettyPhone(branch.phone) })) : null] }), ctx.hoursDisplay !== "none" || ctx.showOpenNow ? (_jsxs("div", { className: "flex flex-col gap-3 border-t border-line pt-5", children: [_jsxs("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("openingHours") }), ctx.showOpenNow ? _jsx(OpenNow, { hours: branch.hours, labels: ctx.openNow, locale: ctx.locale, now: ctx.now }) : null] }), ctx.hoursDisplay !== "none" ? (_jsx(HoursTable, { hours: branch.hours, caption: ctx.t("openingHoursOf", { name: branch.name }), t: ctx.t, locale: ctx.locale, now: ctx.now, openDaysOnly: ctx.hoursDisplay === "open-days" })) : null] })) : null, _jsx(Directions, { branch: branch, ctx: ctx })] }));
+}
+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] })] }));
+}
+function BranchPicker({ branches, ctx, name }) {
+    const list = branches.slice(0, 12);
+    return (_jsxs("div", { className: "vb-branches grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12", children: [_jsxs("fieldset", { className: "flex flex-col @4xl:col-span-4", children: [_jsx("legend", { className: "mb-3 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("chooseBranch") }), _jsx("div", { className: "flex flex-col border-t border-line", children: list.map((b, i) => (_jsxs("label", { className: "vb-branch-option relative flex cursor-pointer flex-col gap-1 border-b border-line py-4 ps-4", children: [_jsx("input", { type: "radio", name: name, value: i, "data-i": i, defaultChecked: i === 0, className: "vb-branch-input sr-only" }), _jsx("span", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", children: b.name }), _jsx("span", { className: "text-small text-fg-muted", children: b.address.district ?? b.address.city }), ctx.showOpenNow ? _jsx(OpenNow, { hours: b.hours, labels: ctx.openNow, locale: ctx.locale, now: ctx.now, className: "text-xs" }) : null] }, i))) })] }), _jsx("div", { className: "@4xl:col-span-8", children: list.map((b, i) => (_jsxs("div", { "data-i": i, className: "vb-branch-panel gap-x-(--gutter) gap-y-8 @2xl:grid-cols-2", children: [_jsx("div", { className: "@2xl:col-span-2", children: b.mapImage?.src && ctx.mapProvider !== "none" ? _jsx(MapFacade, { branch: b, ctx: ctx }) : null }), _jsx("h3", { className: "sr-only", children: b.name }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(AddressBlock, { branch: b, ctx: ctx, large: true }), b.notes ? _jsx("p", { className: "text-small text-fg-muted", children: b.notes }) : null, b.phone ? (_jsx("a", { href: telHref(b.phone), className: "self-start font-medium tabular text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": "call", children: prettyPhone(b.phone) })) : null, _jsx("div", { className: "mt-3", children: _jsx(Directions, { branch: b, ctx: ctx }) })] }), ctx.hoursDisplay !== "none" ? (_jsx(HoursTable, { hours: b.hours, caption: ctx.t("openingHoursOf", { name: b.name }), t: ctx.t, locale: ctx.locale, now: ctx.now, openDaysOnly: ctx.hoursDisplay === "open-days" })) : null] }, i))) })] }));
+}

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { RichDoc } from "../schema/rich-doc.js";
+import { type SiteBlockLabels, type SiteCta, type SiteImage } from "./_kit-1.js";
+export type MediaTextVariant = "side" | "overlap" | "bleed";
+export interface MediaTextVideo {
+    provider: "youtube" | "vimeo" | "mp4";
+    url: string;
+    /** Accessible title ("A morning in our kitchen"). Default: the block title. */
+    title?: string;
+}
+export interface MediaTextProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * side: 5/7 or 7/5, text top-aligned with the image (not centred).
+     * overlap: the image takes 8 columns, a surface panel overlaps its bottom corner by 2.
+     * bleed: the image runs to the section edge, the text stays inside the container.
+     */
+    variant?: MediaTextVariant;
+    eyebrow?: React.ReactNode;
+    title: React.ReactNode;
+    body?: RichDoc | string;
+    /** Short points with accent dashes (≤ 6). */
+    bullets?: React.ReactNode[];
+    cta?: SiteCta;
+    /** The image (also the video poster). */
+    media: SiteImage;
+    /** Static preview → plays only after a click (YouTube via youtube-nocookie). */
+    video?: MediaTextVideo;
+    /** Logical side of the image. Default `"start"`. */
+    mediaSide?: "start" | "end";
+    /** Crop ratio. Default `"4:5"`. */
+    aspect?: "4:5" | "3:2" | "1:1";
+    labels?: SiteBlockLabels;
+}
+/** Embed URL for a video facade (YouTube → youtube-nocookie, Vimeo → player). */
+export declare function videoEmbedUrl(v: MediaTextVideo): string;
+/**
+ * The most used body section: an image or video beside text. Server component; a video is a
+ * click-to-load facade island (no third-party request before the visitor asks).
+ *
+ * ```tsx
+ * <MediaText eyebrow="The kitchen" title="Fish from the *morning* boats" body="…" media={{ src, alt, width, height }} />
+ * ```
+ */
+export declare function MediaText({ variant, eyebrow, title, body, bullets, cta, media, video, mediaSide, aspect, id, theme, anchor, className, headingLevel, labels, locale, components, editMode, }: MediaTextProps): React.JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Play } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { Container, Section } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { BlockImage } from "../block-image.js";
+import { RichText } from "../rich-text.js";
+import { EmbedFacade } from "./embed-facade.js";
+import { CtaList, siteText, useBlockIds } from "./_kit-1.js";
+/** Embed URL for a video facade (YouTube → youtube-nocookie, Vimeo → player). */
+export function videoEmbedUrl(v) {
+    if (v.provider === "youtube") {
+        const id = /(?:v=|youtu\.be\/|embed\/|shorts\/)([\w-]{6,})/.exec(v.url)?.[1];
+        return id ? `https://www.youtube-nocookie.com/embed/${id}?autoplay=1&rel=0` : v.url;
+    }
+    if (v.provider === "vimeo") {
+        const id = /vimeo\.com\/(?:video\/)?(\d+)/.exec(v.url)?.[1];
+        return id ? `https://player.vimeo.com/video/${id}?autoplay=1&dnt=1` : v.url;
+    }
+    return v.url;
+}
+const textOf = (n) => (typeof n === "string" ? n.replace(/\*/g, "") : "");
+/**
+ * The most used body section: an image or video beside text. Server component; a video is a
+ * click-to-load facade island (no third-party request before the visitor asks).
+ *
+ * ```tsx
+ * <MediaText eyebrow="The kitchen" title="Fish from the *morning* boats" body="…" media={{ src, alt, width, height }} />
+ * ```
+ */
+export function MediaText({ variant = "side", eyebrow, title, body, bullets, cta, media, video, mediaSide = "start", aspect = "4:5", id, theme, anchor, className, headingLevel = 2, labels, locale, components, editMode, }) {
+    const t = siteText(labels, locale);
+    const { base, headingId } = useBlockIds(id, "media-text");
+    const end = mediaSide === "end";
+    const ratio = variant === "overlap" ? "3:2" : aspect;
+    const image = (sizes, cls) => {
+        const img = _jsx(BlockImage, { ...media, aspect: ratio, sizes: sizes, className: cn("size-full", cls), components: components, labels: labels, locale: locale, editMode: editMode, field: "props.media" });
+        if (!video)
+            return img;
+        const vTitle = video.title ?? textOf(title);
+        return (_jsx("div", { className: cn("relative overflow-hidden", cls), style: { aspectRatio: ratio.replace(":", " / ") }, children: _jsxs(EmbedFacade, { kind: video.provider === "mp4" ? "video" : "iframe", src: videoEmbedUrl(video), title: vTitle || t("video"), buttonLabel: t("playVideo", { title: vTitle || t("video") }), children: [_jsx(BlockImage, { ...media, alt: undefined, decorative: true, aspect: ratio, sizes: sizes, className: "size-full", components: components }), _jsx("span", { "aria-hidden": true, className: "vb-play absolute inset-0 grid place-items-center", children: _jsx("span", { className: "inline-flex size-16 items-center justify-center rounded-full bg-scene text-fg transition-colors duration-200 group-hover/facade:bg-accent group-hover/facade:text-accent-fg", children: _jsx(Play, { strokeWidth: 1.5, className: "ms-0.5 size-6" }) }) })] }) }));
+    };
+    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 })] }));
+    }
+    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 })] }));
+    }
+    else {
+        content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: cn("@4xl:col-span-5", end && "@4xl:order-2 @4xl:col-start-8"), children: image("(min-width: 56rem) 40vw, 100vw", "rounded-ui") }), _jsx("div", { className: cn("@4xl:col-span-6", end ? "@4xl:order-1 @4xl:col-start-1" : "@4xl:col-start-7"), children: text })] }));
+    }
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: headingId, blockId: base, blockType: "media-text", editMode: editMode, className: cn("vb-media-text", variant === "overlap" && "vb-media-overlap", className), "data-variant": variant, "data-side": mediaSide, children: _jsx("div", { className: "vb-reveal", children: content }) }));
+}

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

@@ -0,0 +1,74 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+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";
+/** 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];
+export interface MenuPrice {
+    /** "Small", "Bottle", "50 min". */
+    label?: React.ReactNode;
+    /** Missing = "Market price". */
+    amount?: MoneyValue;
+}
+export interface MenuItem {
+    name: React.ReactNode;
+    description?: React.ReactNode;
+    /** 1–4 prices. */
+    prices: MenuPrice[];
+    /** "50 min" (service-list). */
+    duration?: React.ReactNode;
+    tags?: MenuTag[];
+    allergens?: Allergen[];
+    /** Square photo (`photo` variant). */
+    image?: SiteImage2;
+    /** "Not today" — shown as a label, never a strikethrough. */
+    unavailable?: boolean;
+    /** service-list: the item's booking link (falls back to `bookHref`). */
+    bookHref?: string;
+}
+export interface MenuCategory {
+    title: React.ReactNode;
+    note?: React.ReactNode;
+    items: MenuItem[];
+    /** Anchor id; default derived from the title. */
+    anchor?: string;
+}
+export interface MenuListProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * classic: printed-menu feel — dotted leaders, tabular prices, serif category titles under a
+     * thin double rule. photo: a 72px square photo per item. service-list: spa/salon rows of
+     * service · duration · price with a "Book" link.
+     */
+    variant?: MenuVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    categories: MenuCategory[];
+    /** Required by D6-8: "Prices include VAT. 10% service is not added." */
+    priceNote?: React.ReactNode;
+    /** Sticky category jump bar. Default: more than two categories. */
+    showNav?: boolean;
+    /** service-list: booking page for every row. */
+    bookHref?: string;
+    /** Show allergen lists under items. Default true. */
+    showAllergens?: boolean;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Restaurant menus and spa/salon price lists — also a QR-menu page. 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.
+ *
+ * ```tsx
+ * <MenuList title="The *menu*" priceNote="Prices include VAT." categories={[{ title: "Cold meze", items: [{ name: "Haydari", prices: [{ amount: { amount: "180", currency: "TRY" } }] }] }]} />
+ * ```
+ */
+export declare function MenuList({ variant, eyebrow, title, lead, categories: all, priceNote, showNav, bookHref, showAllergens, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: MenuListProps): React.JSX.Element;
+/** schema.org `Menu` → `MenuSection` → `MenuItem` + `Offer`. */
+export declare function menuJsonLd(props: Pick<MenuListProps, "categories"> & {
+    name?: string;
+}): Record<string, unknown>;

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

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { slugify } from "../../lib/text.js";
+import { Section, Container } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+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";
+/** 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" };
+/**
+ * Restaurant menus and spa/salon price lists — also a QR-menu page. 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.
+ *
+ * ```tsx
+ * <MenuList title="The *menu*" priceNote="Prices include VAT." categories={[{ title: "Cold meze", items: [{ name: "Haydari", prices: [{ amount: { amount: "180", currency: "TRY" } }] }] }]} />
+ * ```
+ */
+export function MenuList({ variant = "classic", eyebrow, title, lead, categories: all, priceNote, showNav, bookHref, showAllergens = true, id, anchor, theme, headingLevel = 2, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { base, headingId } = useBlockIds2(id, "menu");
+    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 };
+    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));
+                    }) }), 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 }) {
+    if (!price.amount)
+        return _jsx("span", { className: cn("text-small text-fg-muted", className), children: ctx.t("marketPrice") });
+    return (_jsxs("span", { className: cn("tabular text-fg", className), children: [_jsx("span", { "aria-hidden": true, children: formatMoney(price.amount, ctx.locale) }), _jsx("span", { className: "sr-only", children: formatMoneyLong(price.amount, ctx.locale) })] }));
+}
+function Prices({ item, ctx }) {
+    if (item.prices.length === 1 && !item.prices[0].label)
+        return _jsx(Price, { price: item.prices[0], ctx: ctx, className: "font-medium" });
+    return (_jsx("span", { className: "flex flex-wrap justify-end gap-x-4 gap-y-1", children: item.prices.slice(0, 4).map((p, i) => (_jsxs("span", { className: "inline-flex items-baseline gap-1.5 whitespace-nowrap", children: [p.label ? _jsx("span", { className: "text-xs text-fg-muted", children: p.label }) : null, _jsx(Price, { price: p, ctx: ctx, className: "font-medium" })] }, i))) }));
+}
+function Tags({ item, ctx }) {
+    const words = [
+        ...(item.unavailable ? [_jsx("span", { className: "text-fg", children: ctx.t("unavailable") }, "u")] : []),
+        ...(item.tags ?? []).map((tag) => (_jsx("span", { className: "text-accent-ink", children: ctx.t(TAG_KEY[tag]) }, tag))),
+    ];
+    if (!words.length)
+        return null;
+    return (_jsx("span", { className: "flex flex-wrap gap-x-3 gap-y-1 font-mono text-eyebrow uppercase tracking-[0.06em]", children: words }));
+}
+function Allergens({ item, ctx }) {
+    if (!ctx.showAllergens || !item.allergens?.length)
+        return null;
+    return (_jsxs("p", { className: "text-xs text-fg-muted", children: [_jsxs("span", { className: "font-medium", children: [ctx.t("allergens"), ":"] }), " ", item.allergens.map((a) => ctx.t(`allergen_${a}`)).join(", ")] }));
+}
+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 })] })] }));
+}
+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 })] }));
+}
+/** schema.org `Menu` → `MenuSection` → `MenuItem` + `Offer`. */
+export function menuJsonLd(props) {
+    return {
+        "@type": "Menu",
+        name: props.name,
+        hasMenuSection: props.categories.map((c) => ({
+            "@type": "MenuSection",
+            name: textOf(c.title),
+            hasMenuItem: c.items.map((i) => ({
+                "@type": "MenuItem",
+                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"] : [])),
+            })),
+        })),
+    };
+}

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface NavbarSubmenuProps {
+    /** Trigger text. */
+    label: React.ReactNode;
+    /** Server-rendered links (the panel content). */
+    children: React.ReactNode;
+    /** The current page lives in this group (`aria-current` styling on the trigger). */
+    active?: boolean;
+    /** Wide panel with descriptions. */
+    wide?: boolean;
+    className?: string;
+}
+/**
+ * Disclosure-pattern dropdown for navbar groups (~1 KB island; only rendered when an item has
+ * children). Click / Enter / Space toggles, Escape closes and returns focus, focus or a click
+ * leaving the group closes it, ArrowDown opens and moves into the panel.
+ */
+export declare function NavbarSubmenu({ label, children, active, wide, className }: NavbarSubmenuProps): React.JSX.Element;

package/dist/blocks/site/navbar-submenu.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+/**
+ * Disclosure-pattern dropdown for navbar groups (~1 KB island; only rendered when an item has
+ * children). Click / Enter / Space toggles, Escape closes and returns focus, focus or a click
+ * leaving the group closes it, ArrowDown opens and moves into the panel.
+ */
+export function NavbarSubmenu({ label, children, active, wide, className }) {
+    const [open, setOpen] = React.useState(false);
+    const root = React.useRef(null);
+    const trigger = React.useRef(null);
+    const panelId = React.useId();
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!root.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open]);
+    const links = () => Array.from(root.current?.querySelectorAll("[data-nav-panel] a[href]") ?? []);
+    return (_jsxs("div", { ref: root, className: cn("relative", className), "data-state": open ? "open" : "closed", onKeyDown: (e) => {
+            if (e.key === "Escape" && open) {
+                e.stopPropagation();
+                setOpen(false);
+                trigger.current?.focus();
+            }
+            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                const list = links();
+                if (!list.length)
+                    return;
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                    requestAnimationFrame(() => links()[0]?.focus());
+                    return;
+                }
+                const i = list.indexOf(document.activeElement);
+                const next = e.key === "ArrowDown" ? (i + 1) % list.length : i <= 0 ? list.length - 1 : i - 1;
+                list[next]?.focus();
+            }
+        }, onBlur: (e) => {
+            if (open && !root.current?.contains(e.relatedTarget))
+                setOpen(false);
+        }, children: [_jsxs("button", { ref: trigger, type: "button", "aria-expanded": open, "aria-controls": panelId, "data-active": active ? "" : undefined, className: "vb-nav-link inline-flex items-center gap-1", onClick: () => setOpen((o) => !o), children: [label, _jsx(ChevronDown, { "aria-hidden": true, strokeWidth: 1.5, className: cn("size-3.5 transition-transform duration-200", open && "rotate-180") })] }), _jsx("div", { id: panelId, "data-nav-panel": "", "data-state": open ? "open" : "closed", hidden: !open, className: cn("surface-popover absolute start-0 top-[calc(100%+0.75rem)] z-(--z-popover) rounded-ui p-2 ui-pop", wide ? "w-[min(34rem,80vw)]" : "w-60"), children: children })] }));
+}

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type SiteBlockLabels, type SiteCta, type SiteImage, type SiteMeta } from "./_kit-1.js";
+export type NavbarVariant = "bar" | "split" | "minimal" | "rail";
+export interface NavbarLink {
+    label: React.ReactNode;
+    href: string;
+    /** One line under the label in a submenu ("Weekly menus from the pass"). */
+    description?: React.ReactNode;
+    newTab?: boolean;
+}
+export interface NavbarItem extends NavbarLink {
+    /** Submenu links (≤ 8). Desktop: a disclosure dropdown island; mobile: an indented list. */
+    children?: NavbarLink[];
+}
+export interface NavbarLocale {
+    /** "en", "tr" — shown uppercase. */
+    code: string;
+    href: string;
+    /** Marks the active language. Default: `code` matches the `locale` prop. */
+    current?: boolean;
+}
+export interface NavbarProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * bar: logo, links beside it, phone + one CTA at the end.
+     * split: logo dead centre, links on both sides, CTA as a text link at the far end.
+     * minimal: wordmark + "Menu" + CTA; a full-screen menu with display-size links.
+     * rail: links inside one framed pill in the middle, "Sign in" + "Try free" at the end.
+     */
+    variant?: NavbarVariant;
+    logo?: SiteImage;
+    /** Shown instead of `logo` inside dark sections / dark mode. */
+    logoDark?: SiteImage;
+    /** Text mark when there's no logo (or beside it in `minimal`). */
+    wordmark?: React.ReactNode;
+    /** Brand link. Default `"/"`. */
+    homeHref?: string;
+    items?: NavbarItem[];
+    /** Up to two calls to action; one primary. */
+    actions?: SiteCta[];
+    /** E.164 (`+902160000000`). Shown in national format, dialled as `tel:`. */
+    phone?: string;
+    locales?: NavbarLocale[];
+    /** Stick to the top; the background fills in as the page scrolls (CSS scroll timeline). */
+    sticky?: boolean;
+    /** Start transparent with light text over a full-bleed hero. */
+    overlay?: boolean;
+    /** Path of the current page → `aria-current="page"`. */
+    currentPath?: string;
+    /** Facts at the bottom of the full-screen menu (address, hours). */
+    panelMeta?: SiteMeta[];
+    /** Render the "Skip to content" link first. Default true. */
+    skipLink?: boolean;
+    labels?: SiteBlockLabels;
+}
+/** National format in the number's own locale, international elsewhere ("0216 000 00 00" for tr). */
+export declare function formatSitePhone(e164: string, locale?: string): string;
+/**
+ * Site top navigation in four characters. Server component: the mobile menu is a native
+ * `popover` (0 JS), submenus a tiny disclosure island, the scrolled background a CSS scroll
+ * timeline.
+ *
+ * ```tsx
+ * <Navbar wordmark="Kıyı" items={[{ label: "Menu", href: "/menu" }]} actions={[{ link: { href: "/book", label: "Book a table" }, style: "primary" }]} sticky />
+ * ```
+ */
+export declare function Navbar({ variant, logo, logoDark, wordmark, homeHref, items, actions, phone, locales, sticky, overlay, currentPath, panelMeta, skipLink, id, anchor, className, labels, locale, components, editMode, }: NavbarProps): React.JSX.Element;