@vamos-ui/react 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,68 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { AddressValue, SocialNetwork } from "../schema/types.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type SiteImage2, type SiteLink2 } from "./shared/kit-2.js";
+import type { SiteFormAction } from "./shared/site-form.js";
+export type FooterVariant = "columns" | "wordmark" | "minimal";
+export interface FooterProps extends Omit<BlockBaseProps, "variant" | "labels" | "headingLevel"> {
+    /**
+     * columns: brand, short text and contact at the start; up to four link columns at the end; one
+     * legal line under a hairline. wordmark: details laid out across the top, the brand name at
+     * container width at the very bottom. minimal: a single row for landing pages.
+     */
+    variant?: FooterVariant;
+    brand: {
+        name: string;
+        logo?: React.ReactNode | SiteImage2;
+        href?: string;
+    };
+    /** ≤ 200 characters. */
+    about?: React.ReactNode;
+    columns?: {
+        title: React.ReactNode;
+        links: SiteLink2[];
+    }[];
+    contact?: {
+        address?: AddressValue | string;
+        phone?: string;
+        email?: string;
+    };
+    social?: {
+        network: SocialNetwork;
+        href: string;
+    }[];
+    legalLinks?: SiteLink2[];
+    /** Company details — legal name and registry numbers (tax office/number, MERSİS, trade registry). */
+    company?: {
+        legalName: string;
+        registry?: {
+            label: string;
+            value: string;
+        }[];
+    };
+    /** "Site by …" credit. */
+    credit?: SiteLink2;
+    /** "Cookie settings" button that reopens the consent preferences. Default true. */
+    cookieSettings?: boolean;
+    /** Newsletter sign-up (email + button) through the app's action. */
+    newsletter?: {
+        action?: SiteFormAction | string;
+        title?: React.ReactNode;
+        hint?: React.ReactNode;
+    };
+    /** © year. Default: the render year. */
+    year?: number;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Site footer: navigation, contact, socials, legal links and the company details e-commerce law
+ * requires in many countries. `footer` landmark with labelled inner navs; social links are named
+ * by network; "Cookie settings" is a button. Server component.
+ *
+ * ```tsx
+ * <Footer theme={{ mode: "dark" }} brand={{ name: "Vamos" }} columns={[{ title: "Studio", links: [{ href: "/work", label: "Work" }] }]}
+ *   company={{ legalName: "Vamos Dijital Ajans Ltd. Şti.", registry: [{ label: "Tax no.", value: "923 145 6780" }] }} />
+ * ```
+ */
+export declare function Footer({ variant, brand, about, columns, contact, social, legalLinks, company, credit, cookieSettings, newsletter, year, id, anchor, theme, className, labels, locale, components, editMode, }: FooterProps): React.JSX.Element;

package/dist/blocks/site/footer.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { Section, Container } from "../section.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { labelTemplates, site2Text } from "./shared/labels-2.js";
+import { addressLines, fieldAttr, prettyPhone, telHref, useBlockIds2 } from "./shared/kit-2.js";
+import { BrandIcon, BRAND_NAMES } from "./shared/brand-icons.js";
+import { ConsentSettingsButton } from "./shared/consent-island.js";
+import { ContactFormIsland } from "./shared/contact-form-island.js";
+import { contactIslandLabelKeys } from "./shared/island-keys.js";
+const isImage = (v) => !!v && typeof v === "object" && "src" in v && !React.isValidElement(v);
+/**
+ * Site footer: navigation, contact, socials, legal links and the company details e-commerce law
+ * requires in many countries. `footer` landmark with labelled inner navs; social links are named
+ * by network; "Cookie settings" is a button. Server component.
+ *
+ * ```tsx
+ * <Footer theme={{ mode: "dark" }} brand={{ name: "Vamos" }} columns={[{ title: "Studio", links: [{ href: "/work", label: "Work" }] }]}
+ *   company={{ legalName: "Vamos Dijital Ajans Ltd. Şti.", registry: [{ label: "Tax no.", value: "923 145 6780" }] }} />
+ * ```
+ */
+export function Footer({ variant = "columns", brand, about, columns = [], contact, social = [], legalLinks = [], company, credit, cookieSettings = true, newsletter, year, id, anchor, theme, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { base } = useBlockIds2(id, "footer");
+    const y = String(year ?? new Date().getFullYear());
+    const ctx = { t, locale, components, labels, editMode };
+    const copyright = t("copyright", { year: y, name: company?.legalName ?? brand.name });
+    const legalLine = (_jsxs("div", { className: "flex flex-col gap-3 text-small text-fg-muted @4xl:flex-row @4xl:items-center @4xl:justify-between @4xl:gap-8", children: [_jsx("p", { children: copyright }), _jsx("nav", { "aria-label": t("legal"), children: _jsxs("ul", { className: "flex flex-wrap items-center gap-x-5 gap-y-2", children: [legalLinks.map((l, i) => (_jsx("li", { children: _jsx(BlockLink, { href: l.href, newTab: l.newTab, components: components, labels: labels, locale: locale, className: "rounded-[2px] text-fg-muted underline-offset-[0.25em] transition-colors hover:text-fg hover:underline focus-ring", children: l.label }) }, i))), cookieSettings ? (_jsx("li", { children: _jsx(ConsentSettingsButton, { className: "text-fg-muted transition-colors hover:text-fg", children: t("cookieSettings") }) })) : null, credit ? (_jsx("li", { children: _jsx(BlockLink, { href: credit.href, newTab: credit.newTab, components: components, labels: labels, locale: locale, className: "rounded-[2px] text-fg-muted underline-offset-[0.25em] hover:text-fg hover:underline focus-ring", children: t("madeBy", { name: typeof credit.label === "string" ? credit.label : "" }) }) })) : null] }) })] }));
+    // The legal name already sits in the © line; the company row only earns its place with registry data.
+    const companyLine = company?.registry?.length ? (_jsxs("div", { className: "flex flex-col gap-1.5 @4xl:flex-row @4xl:items-baseline @4xl:gap-6", ...fieldAttr(editMode, "company"), children: [_jsx("p", { className: "text-small text-fg-muted", children: company.legalName }), company.registry?.length ? (_jsx("dl", { className: "flex flex-wrap gap-x-6 gap-y-1 font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: company.registry.map((r, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { children: r.label }), _jsx("dd", { className: "tabular text-fg-muted", children: r.value })] }, i))) })) : null] })) : null;
+    if (variant === "minimal") {
+        return (_jsx(Section, { as: "footer", theme: { rhythm: "tight", ...theme }, anchor: anchor, blockId: id, blockType: "footer", editMode: editMode, className: cn("vb-footer", className), "data-variant": "minimal", "aria-label": t("footer"), children: _jsxs(Container, { className: "flex flex-col gap-6 @4xl:flex-row @4xl:items-center @4xl:justify-between", children: [_jsx(BrandMark, { brand: brand, ctx: ctx }), columns[0]?.links.length ? (_jsx("nav", { "aria-label": t("footerNav"), children: _jsx("ul", { className: "flex flex-wrap gap-x-6 gap-y-2 text-small", children: columns.flatMap((c) => c.links).slice(0, 5).map((l, i) => (_jsx("li", { children: _jsx(FooterLink, { link: l, ctx: ctx }) }, i))) }) })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3", children: [_jsx(SocialList, { social: social, ctx: ctx }), _jsx("p", { className: "text-small text-fg-muted", children: copyright })] })] }) }));
+    }
+    const linkColumns = columns.slice(0, 4).map((c, i) => (_jsxs("nav", { "aria-labelledby": `${base}-col-${i}`, className: "flex flex-col gap-4", children: [_jsx("p", { id: `${base}-col-${i}`, className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: c.title }), _jsx("ul", { className: "flex flex-col gap-2.5", children: c.links.slice(0, 8).map((l, j) => (_jsx("li", { children: _jsx(FooterLink, { link: l, ctx: ctx }) }, j))) })] }, i)));
+    const contactBlock = contact ? (_jsxs("div", { className: "flex flex-col gap-2 text-small text-fg-muted", children: [contact.address ? (_jsx("address", { className: "not-italic", children: (typeof contact.address === "string" ? contact.address.split("\n") : addressLines(contact.address, { locale })).map((l, i) => (_jsx("span", { className: "block", children: l }, i))) })) : null, contact.phone ? (_jsx("a", { href: telHref(contact.phone), className: "self-start text-fg tabular underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": "call", children: prettyPhone(contact.phone) })) : null, contact.email ? (_jsx("a", { href: `mailto:${contact.email}`, className: "self-start text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", "data-track": "email", children: contact.email })) : null] })) : null;
+    const newsletterBlock = newsletter ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-body font-medium text-fg", children: newsletter.title ?? t("newsletter") }), _jsx("p", { className: "text-small text-fg-muted", children: newsletter.hint ?? t("newsletterHint") }), _jsx(ContactFormIsland, { action: newsletter.action, fields: [{ name: "email", required: true, label: t("emailAddress") }], labels: { ...labelTemplates(labels, contactIslandLabelKeys), send: t("subscribe"), sent: t("subscribed") }, locale: locale, layout: "minimal", idBase: `${base}-nl`, className: "vb-footer-newsletter" })] })) : null;
+    if (variant === "wordmark") {
+        return (_jsxs(Section, { as: "footer", theme: theme, anchor: anchor, blockId: id, blockType: "footer", editMode: editMode, className: cn("vb-footer overflow-hidden pb-0!", className), "data-variant": "wordmark", "aria-label": t("footer"), children: [_jsxs(Container, { className: "flex flex-col gap-12", children: [_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @2xl:grid-cols-2 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-5 @4xl:col-span-4", children: [about ? _jsx("p", { className: "max-w-[40ch] text-fg-muted text-pretty", children: about }) : null, contactBlock, _jsx(SocialList, { social: social, ctx: ctx })] }), _jsx("div", { className: "grid grid-cols-2 gap-x-(--gutter) gap-y-10 @2xl:col-span-1 @4xl:col-span-8 @4xl:grid-cols-4", children: linkColumns })] }), newsletterBlock ? _jsx("div", { className: "max-w-xl", children: newsletterBlock }) : null, _jsxs("div", { className: "flex flex-col gap-4 border-t border-line pt-6", children: [companyLine, legalLine] })] }), _jsx("p", { "aria-hidden": true, className: "vb-wordmark select-none whitespace-nowrap px-(--gutter) font-display text-display-2xl leading-[0.78] text-fg", 
+                    // Fill the width: a short name at the fixed display size reads as an accidental crop. The
+                    // size never goes above what fits, so a long name is not cut at the side; wide display
+                    // faces (Syne 800 and the like) set `--vb-wordmark-em` (average glyph width, default 0.58em).
+                    style: typeof brand.name === "string" ? { fontSize: `min(calc((100cqi - 2 * var(--gutter, 1.5rem)) / (${Math.max(4, [...brand.name].length)} * var(--vb-wordmark-em, 0.58))), 22rem)` } : undefined, children: brand.name })] }));
+    }
+    return (_jsx(Section, { as: "footer", theme: theme, anchor: anchor, blockId: id, blockType: "footer", editMode: editMode, className: cn("vb-footer", className), "data-variant": "columns", "aria-label": t("footer"), children: _jsxs(Container, { className: "flex flex-col gap-14", children: [_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-4", children: [_jsx(BrandMark, { brand: brand, ctx: ctx }), about ? (_jsx("p", { className: "max-w-[40ch] text-small text-fg-muted text-pretty", ...fieldAttr(editMode, "about"), children: about })) : null, contactBlock, _jsx(SocialList, { social: social, ctx: ctx })] }), _jsx("div", { className: cn("grid grid-cols-2 gap-x-(--gutter) gap-y-10 @4xl:col-span-7 @4xl:col-start-6", columns.length >= 3 && "@2xl:grid-cols-3", columns.length >= 4 && "@6xl:grid-cols-4"), children: linkColumns })] }), newsletterBlock ? _jsx("div", { className: "max-w-xl border-t border-line pt-10", children: newsletterBlock }) : null, _jsxs("div", { className: "flex flex-col gap-4 border-t border-line pt-6", children: [companyLine, legalLine] })] }) }));
+}
+function BrandMark({ brand, ctx }) {
+    const mark = isImage(brand.logo) ? (_jsx(BlockImage, { ...brand.logo, alt: brand.logo.alt ?? brand.name, fit: "contain", className: "h-8 w-auto bg-transparent", components: ctx.components })) : ((brand.logo ?? _jsx("span", { className: "font-display text-display-m leading-none text-fg", children: brand.name })));
+    if (!brand.href)
+        return _jsx("div", { className: "self-start", children: mark });
+    return (_jsx(BlockLink, { href: brand.href, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": brand.name, className: "self-start rounded-[2px] focus-ring", children: mark }));
+}
+function FooterLink({ link, ctx }) {
+    return (_jsx(BlockLink, { href: link.href, newTab: link.newTab, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "rounded-[2px] text-small text-fg underline-offset-[0.25em] transition-colors hover:text-accent-ink hover:underline focus-ring", children: link.label }));
+}
+function SocialList({ social, ctx }) {
+    if (!social?.length)
+        return null;
+    return (_jsx("ul", { className: "flex flex-wrap items-center gap-1", "aria-label": ctx.t("social"), children: social.slice(0, 6).map((s, i) => (_jsx("li", { children: _jsx("a", { href: s.href, target: "_blank", rel: "noopener noreferrer", "aria-label": `${BRAND_NAMES[s.network]} ${ctx.t("opensInNewTab")}`, className: "inline-flex size-10 items-center justify-center rounded-ui-sm text-fg-muted transition-colors hover:bg-hover hover:text-fg focus-ring", "data-track": `social:${s.network}`, children: _jsx(BrandIcon, { name: s.network, className: "size-[18px]" }) }) }, i))) }));
+}

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type SiteImage2 } from "./shared/kit-2.js";
+export type GalleryVariant = "mosaic" | "filmstrip" | "grid" | "split-caption";
+export type GallerySpan = "1" | "wide" | "tall" | "big";
+export interface GalleryImage {
+    image: SiteImage2 & {
+        alt: string;
+    };
+    caption?: React.ReactNode;
+    /** mosaic cell: 1 (4 cols) · wide (8 cols) · tall (4 cols, 2 rows) · big (8 cols, 2 rows). */
+    span?: GallerySpan;
+}
+export interface GallerySectionProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * mosaic: a 12-column grid with author-chosen spans — irregular but aligned. filmstrip: one
+     * horizontally scrolling row, equal heights, overflowing the end edge. grid: equal cells at a
+     * fixed ratio with small captions. split-caption: sticky title beside a vertical image stream.
+     */
+    variant?: GalleryVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    /** 3–40 images, `alt` required. */
+    images: GalleryImage[];
+    /** Open images in a full-screen viewer. Default true. */
+    lightbox?: boolean;
+    /** Cell ratio for `grid` (and `mosaic` fallback). Default `"3:2"`. */
+    aspect?: "mixed" | "3:2" | "1:1" | "4:5";
+    labels?: Site2BlockLabels;
+}
+/**
+ * Venue, food and project photos — the section restaurants, spas and hotels live on. Server
+ * grid; the lightbox is the Media group's viewer (focus trap, Esc, arrows, "Image 3 of 12"),
+ * loaded as an island only when `lightbox` is on.
+ *
+ * ```tsx
+ * <GallerySection variant="mosaic" title="The *room*" images={[{ image: { src, alt, width, height }, span: "big" }, …]} />
+ * ```
+ */
+export declare function GallerySection({ variant: variantProp, eyebrow, title, lead, images, lightbox, aspect, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: GallerySectionProps): React.JSX.Element;

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

@@ -0,0 +1,48 @@
+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 { LightboxTrigger } from "../../media/lightbox.js";
+import { site2Text } from "./shared/labels-2.js";
+import { textOf, useBlockIds2 } from "./shared/kit-2.js";
+import { GalleryLightbox } from "./shared/gallery-lightbox.js";
+import { Stagger } from "../../motion/reveal.js";
+/**
+ * Venue, food and project photos — the section restaurants, spas and hotels live on. Server
+ * grid; the lightbox is the Media group's viewer (focus trap, Esc, arrows, "Image 3 of 12"),
+ * loaded as an island only when `lightbox` is on.
+ *
+ * ```tsx
+ * <GallerySection variant="mosaic" title="The *room*" images={[{ image: { src, alt, width, height }, span: "big" }, …]} />
+ * ```
+ */
+export function GallerySection({ variant: variantProp = "mosaic", eyebrow, title, lead, images, lightbox = true, aspect = "3:2", id, anchor, theme, headingLevel = 2, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { headingId } = useBlockIds2(id, "gallery");
+    const variant = variantProp === "mosaic" && images.length < 5 ? "grid" : variantProp;
+    const ctx = { t, locale, components, editMode, lightbox, total: images.length };
+    const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale }) : null;
+    let body;
+    if (variant === "filmstrip") {
+        body = (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("ul", { className: "vb-filmstrip scrollbar-none flex snap-x snap-mandatory gap-2 overflow-x-auto pb-1", tabIndex: 0, "aria-label": textOf(title).replace(/\*/g, "") || t("galleryImages", { count: images.length }), children: images.map((g, i) => (_jsx("li", { className: "shrink-0 snap-start", children: _jsx(Cell, { g: g, i: i, ctx: ctx, className: "h-[clamp(15rem,38cqi,30rem)]", style: { aspectRatio: g.image.width && g.image.height ? `${g.image.width} / ${g.image.height}` : "4 / 5" }, sizes: "(min-width: 56rem) 40vw, 80vw", fill: true }) }, i))) }), _jsx("p", { className: "vb-container font-mono text-eyebrow tabular uppercase tracking-[0.08em] text-fg-muted", children: t("galleryImages", { count: images.length }) })] }));
+    }
+    else if (variant === "mosaic") {
+        body = (_jsx(Stagger, { asChild: true, effect: "clip", disabled: editMode, children: _jsx("ul", { className: "vb-mosaic grid grid-cols-2 gap-2 @2xl:grid-cols-12", children: images.map((g, i) => (_jsx("li", { "data-span": g.span ?? "1", className: "vb-mosaic-cell min-h-0", children: _jsx(Cell, { g: g, i: i, ctx: ctx, className: "size-full", sizes: "(min-width: 42rem) 66vw, 100vw", fill: true }) }, i))) }) }));
+    }
+    else if (variant === "split-caption") {
+        body = null;
+    }
+    else {
+        const a = aspect === "mixed" ? undefined : aspect;
+        body = (_jsx(Stagger, { asChild: true, disabled: editMode, children: _jsx("ul", { className: "grid grid-cols-2 gap-x-3 gap-y-6 @4xl:grid-cols-3 @4xl:gap-x-4", children: images.map((g, i) => (_jsx("li", { children: _jsxs("figure", { className: "flex flex-col gap-2.5", children: [_jsx(Cell, { g: g, i: i, ctx: ctx, aspect: a ?? "3:2", sizes: "(min-width: 56rem) 33vw, 50vw" }), g.caption ? _jsx("figcaption", { className: "text-small text-fg-muted", children: g.caption }) : null] }) }, i))) }) }));
+    }
+    const content = variant === "split-caption" ? (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12", children: [_jsx("div", { className: "@4xl:col-span-4", children: _jsx("div", { className: "flex flex-col gap-6 @4xl:sticky @4xl:top-[calc(var(--topbar-h,0px)+2rem)]", children: header }) }), _jsx("ol", { className: "flex flex-col gap-12 @4xl:col-span-7 @4xl:col-start-6", children: images.map((g, i) => (_jsx("li", { children: _jsxs("figure", { className: "flex flex-col gap-4", children: [_jsx(Cell, { g: g, i: i, ctx: ctx, sizes: "(min-width: 56rem) 58vw, 100vw" }), g.caption ? (_jsxs("figcaption", { className: "flex gap-4 text-small text-fg-muted text-pretty", children: [_jsx("span", { "aria-hidden": true, className: "font-mono text-eyebrow tabular text-fg-subtle", children: t("imageCounter", { index: i + 1, total: images.length }) }), _jsx("span", { children: g.caption })] })) : null] }) }, i))) })] })) : (_jsxs(_Fragment, { children: [header ? _jsx(Container, { children: header }) : null, variant === "filmstrip" ? _jsx("div", { className: "vb-filmstrip-wrap", children: body }) : _jsx(Container, { children: body })] }));
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "gallery", editMode: editMode, className: cn("vb-gallery", className), "data-variant": variant, children: _jsx("div", { className: "flex flex-col gap-10 @4xl:gap-14", children: lightbox ? (_jsx(GalleryLightbox, { items: images.map((g) => ({ src: g.image.src, alt: g.image.alt, width: g.image.width, height: g.image.height, caption: textOf(g.caption) || undefined, focalPoint: g.image.focal })), children: content })) : (content) }) }));
+}
+function Cell({ g, i, ctx, className, style, sizes, aspect, fill }) {
+    const img = (_jsx(BlockImage, { ...g.image, aspect: aspect, sizes: sizes, className: cn("vb-gallery-img rounded-ui-sm", fill && "size-full", !ctx.lightbox && className), style: !ctx.lightbox ? style : undefined, components: ctx.components, editMode: ctx.editMode, field: `props.images.${i}.image` }));
+    if (!ctx.lightbox)
+        return img;
+    return (_jsx(LightboxTrigger, { index: i, "aria-label": ctx.t("openImage", { index: i + 1, total: ctx.total }), className: cn("vb-gallery-trigger group/img block rounded-ui-sm", className), style: style, children: img }));
+}

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface HeroVideoProps {
+    /** MP4 source. */
+    src: string;
+    /** Required: shown before playback, on failure and under reduced motion. */
+    poster: string;
+    pauseLabel: string;
+    playLabel: string;
+    className?: string;
+}
+/**
+ * Muted, looping background video for the full-bleed hero (~1 KB island). Pause button for
+ * WCAG 2.2.2; under `prefers-reduced-motion` it never autoplays and shows the poster.
+ */
+export declare function HeroVideo({ src, poster, pauseLabel, playLabel, className }: HeroVideoProps): React.JSX.Element;

package/dist/blocks/site/hero-video.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Pause, Play } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+/**
+ * Muted, looping background video for the full-bleed hero (~1 KB island). Pause button for
+ * WCAG 2.2.2; under `prefers-reduced-motion` it never autoplays and shows the poster.
+ */
+export function HeroVideo({ src, poster, pauseLabel, playLabel, className }) {
+    const ref = React.useRef(null);
+    const [playing, setPlaying] = React.useState(false);
+    React.useEffect(() => {
+        const v = ref.current;
+        if (!v)
+            return;
+        const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        if (reduce)
+            return;
+        v.play()?.then(() => setPlaying(true)).catch(() => setPlaying(false));
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("video", { ref: ref, className: cn("absolute inset-0 size-full object-cover", className), src: src, poster: poster, muted: true, loop: true, playsInline: true, preload: "metadata", "aria-hidden": true, tabIndex: -1, onPause: () => setPlaying(false), onPlay: () => setPlaying(true) }), _jsx("button", { type: "button", "aria-label": playing ? pauseLabel : playLabel, "aria-pressed": !playing, className: "vb-hero-video-toggle absolute end-(--gutter) top-[calc(var(--vb-nav-h,4.5rem)+1rem)] z-10 inline-flex size-9 items-center justify-center rounded-full border border-[color-mix(in_oklch,var(--fg)_35%,transparent)] text-fg transition-colors hover:bg-hover focus-ring", onClick: () => {
+                    const v = ref.current;
+                    if (!v)
+                        return;
+                    if (v.paused)
+                        void v.play()?.catch(() => undefined);
+                    else
+                        v.pause();
+                }, children: playing ? _jsx(Pause, { "aria-hidden": true, strokeWidth: 1.5, className: "size-4" }) : _jsx(Play, { "aria-hidden": true, strokeWidth: 1.5, className: "size-4" }) })] }));
+}

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

@@ -0,0 +1,64 @@
+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 HeroVariant = "editorial" | "split-media" | "full-bleed" | "product" | "statement";
+export interface HeroProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * editorial: huge start-aligned title, narrow lead, a 21:9 photo strip bleeding edge to edge.
+     * split-media: 7/5 split, a 4:5 portrait bleeding off the end edge with a mono caption.
+     * full-bleed: full-screen photo/video under a scrim, title bottom-start, an aside card bottom-end.
+     * product: release chip, title, two actions, a real screenshot cropped by the section edge.
+     * statement: one centred sentence, services as slash-separated links. No image.
+     */
+    variant?: HeroVariant;
+    /** Small mono line above the title ("Agency · Maltepe, Istanbul"). */
+    eyebrow?: React.ReactNode;
+    /** The page `h1`. A string supports one `*emphasis*`. ≤ 9 words reads best. */
+    title: React.ReactNode;
+    lead?: React.ReactNode;
+    /** Up to two actions; one primary. */
+    actions?: SiteCta[];
+    media?: SiteImage;
+    /** full-bleed: muted looping MP4 (`media` is the required poster). */
+    video?: {
+        src: string;
+    };
+    /** split-media: mono caption in the photo's corner ("Hammam room, 2nd floor"). */
+    caption?: React.ReactNode;
+    /** Small true facts ("Founded" · "2014"), up to 4. */
+    meta?: SiteMeta[];
+    /** product: the product screenshot (no device frame). */
+    screenshot?: SiteImage;
+    /** product: a live composition instead of a screenshot (plain JSX only). */
+    visual?: React.ReactNode;
+    /** product: chip above the title ("v2.4 · November — what's new"). */
+    release?: {
+        label: React.ReactNode;
+        href: string;
+        tag?: React.ReactNode;
+    };
+    /** statement: services as inline links separated by slashes. */
+    services?: {
+        label: React.ReactNode;
+        href: string;
+    }[];
+    /** full-bleed: corner card (today's hours + "Book a table"). */
+    aside?: {
+        title: React.ReactNode;
+        body?: React.ReactNode;
+        cta?: SiteCta;
+    };
+    /** full-bleed only: `screen` fills the viewport. Default `"auto"`. */
+    height?: "auto" | "screen";
+    labels?: SiteBlockLabels;
+}
+/**
+ * The first screen and the page `h1`, in five characters per sector — never the generic
+ * "centred title + two buttons + abstract visual". Server component; the background video is a
+ * tiny island. Above the fold, so nothing animates in.
+ *
+ * ```tsx
+ * <Hero variant="split-media" eyebrow="Day spa · Moda" title="Two hours, *nowhere* to be." media={{ src, alt, width, height }} />
+ * ```
+ */
+export declare function Hero(props: HeroProps): React.JSX.Element;

package/dist/blocks/site/hero.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Container, Section } from "../section.js";
+import { BlockHeading, renderEmphasis } from "../block-heading.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { HeroVideo } from "./hero-video.js";
+import { ArrowEnd, CtaList, field, siteText, useBlockIds } from "./_kit-1.js";
+/**
+ * The first screen and the page `h1`, in five characters per sector — never the generic
+ * "centred title + two buttons + abstract visual". Server component; the background video is a
+ * tiny island. Above the fold, so nothing animates in.
+ *
+ * ```tsx
+ * <Hero variant="split-media" eyebrow="Day spa · Moda" title="Two hours, *nowhere* to be." media={{ src, alt, width, height }} />
+ * ```
+ */
+export function Hero(props) {
+    const { variant = "editorial", id, theme, anchor, className, headingLevel = 1, editMode, components, labels, locale } = props;
+    const { base, headingId } = useBlockIds(id, "hero");
+    const sectionTheme = variant === "full-bleed" ? { ...theme, mode: "dark" } : theme;
+    return (_jsx(Section, { theme: sectionTheme, anchor: anchor, headingId: headingId, blockId: base, blockType: "hero", editMode: editMode, components: components, labels: labels, priority: true, "data-variant": variant, className: cn("vb-hero", className), children: variant === "split-media" ? (_jsx(SplitMedia, { ...props, headingId: headingId, headingLevel: headingLevel })) : variant === "full-bleed" ? (_jsx(FullBleed, { ...props, headingId: headingId, headingLevel: headingLevel })) : variant === "product" ? (_jsx(Product, { ...props, headingId: headingId, headingLevel: headingLevel })) : variant === "statement" ? (_jsx(Statement, { ...props, headingId: headingId, headingLevel: headingLevel })) : (_jsx(Editorial, { ...props, headingId: headingId, headingLevel: headingLevel })) }));
+}
+/**
+ * Entrance cascade (motion.css `.vm-enter`): CSS keyframes from the first paint, no JS, so the
+ * hero never waits for hydration. Follows the SiteShell motion level; off in edit mode.
+ */
+const ENTER = ["[--vm-i:0]", "[--vm-i:1]", "[--vm-i:2]", "[--vm-i:3]", "[--vm-i:4]", "[--vm-i:5]"];
+const enter = (editMode, i, kind) => editMode ? undefined : cn("vm-enter", ENTER[i], kind === "title" && "vm-enter-title", kind === "media" && "vm-enter-media");
+function Eyebrow({ children, editMode, className }) {
+    if (!children)
+        return null;
+    return (_jsx("p", { className: cn("font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", className), ...field(editMode, "eyebrow"), children: renderEmphasis(children) }));
+}
+function Lead({ children, editMode, className }) {
+    if (!children)
+        return null;
+    return (_jsx("p", { className: cn("vb-lead text-lead text-fg-muted", className), ...field(editMode, "lead"), children: children }));
+}
+function Meta({ items, className }) {
+    if (!items?.length)
+        return null;
+    return (_jsx("dl", { className: cn("flex flex-col gap-1.5 font-mono text-small text-fg-muted", className), children: items.slice(0, 4).map((m, i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { className: "text-fg-subtle after:content-['\u00B7'] after:ps-2", children: m.label }), _jsx("dd", { className: "text-fg", children: m.value })] }, i))) }));
+}
+function Title({ p, size, className }) {
+    return (_jsx(BlockHeading, { id: p.headingId, level: p.headingLevel, size: size, text: p.title, editMode: p.editMode, field: "props.title", labels: p.labels, locale: p.locale, className: cn("vb-hero-title", enter(p.editMode, 1, "title"), className) }));
+}
+/* editorial ----------------------------------------------------------- */
+function Editorial(p) {
+    const { eyebrow, lead, actions, meta, media, components, labels, locale, editMode } = p;
+    return (_jsxs(_Fragment, { children: [_jsxs(Container, { className: "flex flex-col gap-8", children: [_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow }), _jsx(Title, { p: p, size: "display-xl", className: "max-w-[18ch]" }), _jsxs("div", { className: "grid gap-x-(--gutter) gap-y-8 pt-2 @4xl:grid-cols-12 @4xl:items-end", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-6 @6xl:col-span-5", children: [_jsx(Lead, { editMode: editMode, className: enter(editMode, 2), children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, max: 1, editMode: editMode, className: enter(editMode, 3) })] }), _jsx(Meta, { items: meta, className: cn("@4xl:col-span-4 @4xl:col-start-9 @4xl:items-end @4xl:text-end", enter(editMode, 4)) })] })] }), media ? (_jsx("div", { className: cn("vb-hero-strip mt-[calc(var(--section-y)*0.6)]", enter(editMode, 4, "media")), children: _jsx(BlockImage, { ...media, aspect: "21:9", priority: true, sizes: "100vw", components: components, labels: labels, editMode: editMode, field: "props.media" }) })) : null] }));
+}
+/* split-media ---------------------------------------------------------- */
+function SplitMedia(p) {
+    const { eyebrow, lead, actions, meta, media, caption, components, labels, locale, editMode } = p;
+    return (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsxs("div", { className: "order-2 flex flex-col gap-7 @4xl:order-1 @4xl:col-span-7 @4xl:pt-[calc(var(--section-y)*0.35)] @6xl:pe-[calc(var(--gutter)*2)]", children: [_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow }), _jsx(Title, { p: p, size: "display-xl" }), _jsx(Lead, { editMode: editMode, className: cn("max-w-[46ch]", enter(editMode, 2)), children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode, className: cn("pt-2", enter(editMode, 3)) }), _jsx(Meta, { items: meta, className: cn("mt-auto border-t border-line pt-5 @4xl:mt-10", enter(editMode, 4)) })] }), media ? (_jsxs("figure", { className: cn("vb-hero-portrait vb-bleed-end relative order-1 my-0 @4xl:order-2 @4xl:col-span-5", enter(editMode, 1, "media")), ...field(editMode, "media"), children: [_jsx(BlockImage, { ...media, aspect: "4:5", priority: true, sizes: "(min-width: 56rem) 42vw, 100vw", className: "aspect-square! @4xl:aspect-[4/5]!", components: components, labels: labels }), caption ? (_jsx("figcaption", { className: "absolute bottom-0 start-0 bg-scene px-3 py-2 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", ...field(editMode, "caption"), children: caption })) : null] })) : null] }));
+}
+/* full-bleed ----------------------------------------------------------- */
+function FullBleed(p) {
+    const { eyebrow, lead, actions, media, video, aside, height = "auto", components, labels, locale, editMode } = p;
+    const t = siteText(labels, locale);
+    return (_jsxs("div", { className: cn("vb-hero-bleed", height === "screen" && "vb-hero-screen"), children: [_jsxs("div", { className: cn("vb-hero-media", enter(editMode, 0, "media")), "aria-hidden": video ? undefined : "true", children: [media ? (_jsx(BlockImage, { ...media, decorative: true, priority: true, sizes: "100vw", className: "absolute inset-0 h-full", components: components, labels: labels, editMode: editMode, field: "props.media" })) : null, video && media ? _jsx(HeroVideo, { src: video.src, poster: media.src, pauseLabel: t("pauseVideo"), playLabel: t("resumeVideo") }) : null] }), _jsxs(Container, { className: "relative z-[1] grid w-full content-end gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-end", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-8 @6xl:col-span-7", children: [_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow }), _jsx(Title, { p: p, size: "display-xl" }), _jsx(Lead, { editMode: editMode, className: cn("max-w-[52ch] text-fg", enter(editMode, 2)), children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode, className: cn("pt-2", enter(editMode, 3)) })] }), aside ? (_jsxs("aside", { className: cn("vb-hero-aside surface flex flex-col gap-3 rounded-ui p-5 @4xl:col-span-4 @4xl:col-start-9 @6xl:col-span-3 @6xl:col-start-10", enter(editMode, 4)), ...field(editMode, "aside"), children: [_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: aside.title }), aside.body ? _jsx("p", { className: "text-body tabular text-fg", children: aside.body }) : null, aside.cta ? _jsx(CtaList, { actions: [aside.cta], components: components, labels: labels, locale: locale, size: "md", max: 1, className: "pt-1 [&>a]:w-full" }) : null] })) : null] })] }));
+}
+/* product -------------------------------------------------------------- */
+function Product(p) {
+    const { eyebrow, lead, actions, release, screenshot, visual, meta, components, labels, locale, editMode } = p;
+    return (_jsxs(Container, { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-col gap-7", children: [release ? (_jsxs(BlockLink, { href: release.href, components: components, labels: labels, locale: locale, editMode: editMode, field: "props.release", className: cn("group/rel inline-flex w-fit items-center gap-3 rounded-full border border-line py-1 ps-1 pe-3.5 text-small text-fg-muted transition-colors hover:border-field-border-hover hover:text-fg focus-ring", enter(editMode, 0)), children: [release.tag ? _jsx("span", { className: "rounded-full bg-accent-soft px-2.5 py-0.5 font-mono text-eyebrow tracking-[0.04em] text-accent-ink", children: release.tag }) : null, _jsx("span", { children: release.label }), _jsx(ArrowEnd, { className: "group-hover/rel:translate-x-0.5 rtl:group-hover/rel:-translate-x-0.5" })] })) : (_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow })), _jsxs("div", { className: "grid gap-x-(--gutter) gap-y-7 @4xl:grid-cols-12 @4xl:items-end", children: [_jsx(Title, { p: p, size: "display-xl", className: "@4xl:col-span-8" }), _jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-4", children: [_jsx(Lead, { editMode: editMode, className: enter(editMode, 2), children: lead }), _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, size: "md", editMode: editMode, className: enter(editMode, 3) })] })] }), _jsx(Meta, { items: meta, className: cn("flex-row flex-wrap gap-x-6", enter(editMode, 4)) })] }), screenshot || visual ? (_jsx("div", { className: cn("vb-hero-shot mt-[calc(var(--section-y)*0.55)]", enter(editMode, 5, "media")), ...field(editMode, "screenshot"), children: visual ?? _jsx(BlockImage, { ...screenshot, priority: true, sizes: "min(100vw, 90rem)", components: components, labels: labels }) })) : null] }));
+}
+/* statement ------------------------------------------------------------ */
+function Statement(p) {
+    const { eyebrow, services, actions, components, labels, locale, editMode } = p;
+    return (_jsxs(Container, { className: "flex flex-col items-center gap-10 text-center", children: [_jsx(Eyebrow, { editMode: editMode, className: enter(editMode, 0), children: eyebrow }), _jsx(Title, { p: p, size: "display-2xl", className: "max-w-[16ch]" }), services?.length ? (_jsx("ul", { className: cn("flex max-w-(--prose) flex-wrap justify-center gap-x-3 gap-y-2 text-lead text-fg-muted", enter(editMode, 2)), ...field(editMode, "services"), children: services.map((s, i) => (_jsxs("li", { className: "flex items-baseline gap-3", children: [i > 0 ? (_jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: "/" })) : null, _jsx(BlockLink, { href: s.href, components: components, labels: labels, locale: locale, className: "rounded-[2px] text-fg underline decoration-line underline-offset-[0.25em] transition-[text-decoration-color] hover:decoration-current focus-ring", children: s.label })] }, i))) })) : null, _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode, className: cn("justify-center", enter(editMode, 3)) })] }));
+}

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type SiteBlockLabels, type SiteImage } from "./_kit-1.js";
+export type LogoStripVariant = "row" | "marquee" | "grid";
+export interface LogoItem {
+    /** Brand name — the logo's alt text. */
+    name: string;
+    image: SiteImage;
+    /** Used inside dark sections / dark mode instead of `invert()`. */
+    imageDark?: SiteImage;
+    link?: {
+        href: string;
+        newTab?: boolean;
+    };
+}
+export interface LogoStripProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * row: caption at the start, logos on one line at an equal optical height (28px).
+     * marquee: an endless band with faded edges (Ticker); pauses on hover/focus and with its pause
+     * control; static under reduced motion and `motion="off"`.
+     * grid: 4–6 columns separated by 1px gridlines, logos centred in cells.
+     */
+    variant?: LogoStripVariant;
+    /** "120+ businesses since 2014". */
+    caption?: React.ReactNode;
+    logos: LogoItem[];
+    /** Greyscale at 70% opacity, full colour on hover. Default true. */
+    monochrome?: boolean;
+    /** grid: columns on wide containers. Default 5. */
+    columns?: 4 | 5 | 6;
+    /** marquee: seconds for one loop. Default 40. */
+    speed?: number;
+    labels?: SiteBlockLabels;
+}
+/**
+ * "Brands we work with" proof. Server component; the marquee is the motion kit's Ticker: CSS
+ * keyframes, paused on hover, focus and with its pause control; static under reduced motion and
+ * SiteShell `motion="off"`; the duplicate copy is `aria-hidden` and `inert`).
+ *
+ * ```tsx
+ * <LogoStrip caption="Trusted by 120+ businesses since 2014" logos={[{ name: "Kıyı", image: { src, width, height } }]} />
+ * ```
+ */
+export declare function LogoStrip({ variant, caption, logos, monochrome, columns, speed, id, theme, anchor, className, labels, locale, components, editMode }: LogoStripProps): React.JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Container, Section } from "../section.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { Ticker } from "../../motion/ticker.js";
+import { siteText, useBlockIds } from "./_kit-1.js";
+/**
+ * "Brands we work with" proof. Server component; the marquee is the motion kit's Ticker: CSS
+ * keyframes, paused on hover, focus and with its pause control; static under reduced motion and
+ * SiteShell `motion="off"`; the duplicate copy is `aria-hidden` and `inert`).
+ *
+ * ```tsx
+ * <LogoStrip caption="Trusted by 120+ businesses since 2014" logos={[{ name: "Kıyı", image: { src, width, height } }]} />
+ * ```
+ */
+export function LogoStrip({ variant = "row", caption, logos, monochrome = true, columns = 5, speed = 40, id, theme, anchor, className, labels, locale, components, editMode }) {
+    const { base, headingId } = useBlockIds(id, "logos");
+    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] }));
+        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;
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: caption ? headingId : undefined, "aria-label": caption ? undefined : t("logos"), blockId: base, blockType: "logo-strip", editMode: editMode, className: cn("vb-logos", className), "data-variant": marquee ? "marquee" : variant === "marquee" ? "row" : variant, "data-mono": monochrome ? "" : undefined, children: marquee ? (_jsxs("div", { className: "flex flex-col gap-8", children: [captionEl ? _jsx(Container, { children: captionEl }) : null, _jsx(Ticker, { as: "ul", duration: speed, pauseLabel: t("pauseMotion"), className: "vb-marquee-band", "data-motion": editMode ? "off" : undefined, children: logos.map((l, i) => logo(l, i)) })] })) : variant === "grid" ? (_jsxs(Container, { className: "flex flex-col gap-8", children: [captionEl, _jsx("ul", { className: cn("vb-logo-grid grid grid-cols-2 @2xl:grid-cols-3", columns === 4 && "@4xl:grid-cols-4", columns === 5 && "@4xl:grid-cols-5", columns === 6 && "@4xl:grid-cols-4 @6xl:grid-cols-6"), children: logos.map((l, i) => logo(l, i)) })] })) : (_jsxs(Container, { className: "flex flex-col gap-8 @4xl:flex-row @4xl:items-center @4xl:gap-(--gutter)", children: [captionEl, _jsx("ul", { className: "flex flex-1 flex-wrap items-center gap-x-[clamp(2rem,5cqi,4rem)] gap-y-6", children: logos.map((l, i) => logo(l, i)) })] })) }));
+}

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

@@ -0,0 +1,83 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { AddressValue, OpeningHours } from "../schema/types.js";
+import { type Site2BlockLabels, type Site2Text } from "./shared/labels-2.js";
+import { type SiteImage2 } from "./shared/kit-2.js";
+export type MapHoursVariant = "map-split" | "info" | "branches";
+export type DirectionsProvider = "google" | "apple" | "yandex" | "waze";
+export type BusinessType = "LocalBusiness" | "Restaurant" | "DaySpa" | "BeautySalon" | "MedicalClinic" | "ProfessionalService" | "EventVenue";
+/** How the weekly hours show: every day (`week`), only days with hours or a note (`open-days`), or not at all (`none`). */
+export type HoursDisplay = "week" | "open-days" | "none";
+export interface Branch {
+    name: string;
+    address: AddressValue;
+    /** E.164. */
+    phone?: string;
+    email?: string;
+    hours: OpeningHours;
+    /** Static map picture for the facade (greyscale, an accent pin on top). */
+    mapImage?: SiteImage2;
+    /** Google Business Profile / place link. */
+    placeUrl?: string;
+    /** Custom embed URL; default: a keyless Google Maps or OpenStreetMap embed built from the address. */
+    mapEmbedUrl?: string;
+    /** "Parking on level −2 of Piazza." */
+    notes?: React.ReactNode;
+}
+export interface MapHoursProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * map-split: map facade on the start side, address, hours and directions on the end side.
+     * info: no map — Address / Hours / Contact in three typographic columns. branches: a location
+     * picker beside the selected location's details and map (radios + `:has()`, 0 JS).
+     */
+    variant?: MapHoursVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    branches: Branch[];
+    businessType?: BusinessType;
+    /** Embed provider loaded by the facade. Default `"google"`. */
+    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. */
+    showOpenNow?: boolean;
+    /**
+     * Weekly hours: `week` (default) lists all seven days, `open-days` hides closed days (a venue
+     * open only on event weekends), `none` drops the hours table — JSON-LD still carries the hours.
+     */
+    hoursDisplay?: HoursDisplay;
+    /** Fixed "now" (ISO) for previews and tests; marks today in the hours table. Default the render time. */
+    now?: string;
+    labels?: Site2BlockLabels;
+}
+/** Direction URL for a provider (no API keys). */
+export declare function directionsUrl(provider: DirectionsProvider, b: Branch): string;
+/** Keyless embed URL (Google `output=embed` or an OpenStreetMap export frame). */
+export declare function mapEmbedUrl(b: Branch, provider?: "google" | "osm"): string | undefined;
+/** schema.org LocalBusiness (or a subtype) per branch — usable without the renderer. */
+export declare function localBusinessJsonLd(props: Pick<MapHoursProps, "branches" | "businessType">): Record<string, unknown>[];
+/**
+ * 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 declare function MapHours({ variant: variantProp, eyebrow, title, lead, branches, businessType, mapProvider, directions, showOpenNow, hoursDisplay, now, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: MapHoursProps): React.JSX.Element | null;
+/**
+ * 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 declare function HoursTable({ hours, caption, t, locale, now, openDaysOnly, className }: {
+    hours: OpeningHours;
+    caption: string;
+    t: Site2Text;
+    locale: string;
+    now?: string;
+    openDaysOnly?: boolean;
+    className?: string;
+}): React.JSX.Element | null;