@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/blocks/site/navbar.js

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

package/dist/blocks/site/not-found.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type SiteLink2 } from "./shared/kit-2.js";
+export type NotFoundVariant = "plain" | "links";
+export type NotFoundKind = "404" | "500" | "maintenance";
+export interface NotFoundProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /** plain: small mono code, a sentence title and one "Back to home" link. links: plus popular pages, a search field and a phone line. */
+    variant?: NotFoundVariant;
+    /** Default `"404"`. */
+    kind?: NotFoundKind;
+    /** Default per kind ("This page moved, or never existed."). One `*emphasis*`. */
+    title?: React.ReactNode;
+    text?: React.ReactNode;
+    /** Up to 6 popular pages (`links`). */
+    links?: SiteLink2[];
+    /** Default `"/"`. */
+    homeHref?: string;
+    /** Plain GET search form (`action="/search"`, `param="q"`). */
+    search?: {
+        action: string;
+        param?: string;
+    };
+    /** E.164 phone for "Still stuck? Call …". */
+    phone?: string;
+    /** `error.tsx`: Next.js's `reset()` — renders a "Try again" button (client usage only). */
+    reset?: () => void;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Branded, useful not-found / error / maintenance page for `not-found.tsx` and `error.tsx`. No
+ * giant numerals: a small mono code, a sentence title (`h1`), the way back. Works as a server
+ * component, and inside `error.tsx` (client) with `reset`.
+ *
+ * ```tsx
+ * // app/not-found.tsx
+ * export default function NotFoundPage() { return <NotFound variant="links" links={popular} search={{ action: "/search" }} />; }
+ * ```
+ */
+export declare function NotFound({ variant, kind, title, text, links, homeHref, search, phone, reset, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: NotFoundProps): React.JSX.Element;

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

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

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type SiteBlockLabels, type SiteImage, type SiteMeta } from "./_kit-1.js";
+export type PageIntroVariant = "simple" | "with-media" | "ruled";
+export interface PageIntroCrumb {
+    label: React.ReactNode;
+    /** Omit on the current page (the last crumb). */
+    href?: string;
+}
+export interface PageIntroProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * simple: small breadcrumb, display-l title, lead beside it on wide containers.
+     * with-media: title + lead, then a 21:9 image bleeding past the container.
+     * ruled: title at the start, 2–3 meta rows behind a vertical rule at the end, hairline below.
+     */
+    variant?: PageIntroVariant;
+    /** Ancestors first; the last crumb is the current page (`aria-current="page"`). */
+    breadcrumb?: PageIntroCrumb[];
+    eyebrow?: React.ReactNode;
+    /** The page `h1` (inner pages). One `*emphasis*`. */
+    title: React.ReactNode;
+    lead?: React.ReactNode;
+    media?: SiteImage;
+    /** ruled: facts on the end side ("Service area" · "Asian side"), up to 3. */
+    meta?: SiteMeta[];
+    labels?: SiteBlockLabels;
+    /**
+     * Explicit id for the `h1` (e.g. to move focus back to it after an in-page route change).
+     * Default: `<id>-title`, or an auto id.
+     */
+    headingId?: string;
+}
+/** `BreadcrumbList` JSON-LD for the crumbs (absolute URLs need `origin`). */
+export declare function breadcrumbJsonLd(crumbs: {
+    label: string;
+    href?: string;
+}[], origin?: string): Record<string, unknown> | null;
+/**
+ * The `h1` + breadcrumb of an inner page (About, Services, Contact) — lighter than a hero.
+ * Server component.
+ *
+ * ```tsx
+ * <PageIntro breadcrumb={[{ label: "Home", href: "/" }, { label: "Treatments" }]} title="Treatments, *by the hour*" />
+ * ```
+ */
+export declare function PageIntro({ variant, breadcrumb, eyebrow, title, lead, media, meta, id, theme, anchor, className, headingLevel, labels, locale, components, editMode, headingId: headingIdProp }: PageIntroProps): React.JSX.Element;

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

@@ -0,0 +1,44 @@
+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 } from "../block-heading.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { field, siteText, useBlockIds } from "./_kit-1.js";
+/** `BreadcrumbList` JSON-LD for the crumbs (absolute URLs need `origin`). */
+export function breadcrumbJsonLd(crumbs, origin = "") {
+    if (!crumbs.length)
+        return null;
+    return {
+        "@type": "BreadcrumbList",
+        itemListElement: crumbs.map((c, i) => ({ "@type": "ListItem", position: i + 1, name: c.label, ...(c.href ? { item: `${origin}${c.href}` } : null) })),
+    };
+}
+/**
+ * The `h1` + breadcrumb of an inner page (About, Services, Contact) — lighter than a hero.
+ * Server component.
+ *
+ * ```tsx
+ * <PageIntro breadcrumb={[{ label: "Home", href: "/" }, { label: "Treatments" }]} title="Treatments, *by the hour*" />
+ * ```
+ */
+export function PageIntro({ variant = "simple", breadcrumb, eyebrow, title, lead, media, meta, id, theme, anchor, className, headingLevel = 1, labels, locale, components, editMode, headingId: headingIdProp }) {
+    const t = siteText(labels, locale);
+    const { base, headingId: autoHeadingId } = useBlockIds(id, "intro");
+    const headingId = headingIdProp ?? autoHeadingId;
+    const linkProps = { components, labels, locale };
+    const crumbs = breadcrumb?.length ? (_jsx("nav", { "aria-label": t("breadcrumb"), ...field(editMode, "breadcrumb"), children: _jsx("ol", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-subtle", children: breadcrumb.map((c, i) => {
+                const last = i === breadcrumb.length - 1;
+                return (_jsxs("li", { className: "flex items-center gap-2", children: [i > 0 ? (_jsx("span", { "aria-hidden": true, className: "text-fg-subtle/70 rtl:-scale-x-100", children: "/" })) : null, c.href && !last ? (_jsx(BlockLink, { href: c.href, ...linkProps, className: "rounded-[2px] transition-colors hover:text-fg focus-ring", children: c.label })) : (_jsx("span", { "aria-current": last ? "page" : undefined, className: last ? "text-fg-muted" : undefined, children: c.label }))] }, i));
+            }) }) })) : eyebrow ? (_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", ...field(editMode, "eyebrow"), children: eyebrow })) : null;
+    const heading = _jsx(BlockHeading, { id: headingId, level: headingLevel, size: "display-l", text: title, editMode: editMode, field: "props.title", labels: labels, locale: locale, className: "max-w-[20ch]" });
+    const leadEl = lead ? (_jsx("p", { className: "vb-lead max-w-[52ch] text-lead text-fg-muted", ...field(editMode, "lead"), children: lead })) : null;
+    let content;
+    if (variant === "ruled") {
+        content = (_jsx(Container, { children: _jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 border-b border-line pb-[calc(var(--section-y)*0.4)] @4xl:grid-cols-12 @4xl:items-end", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-7", children: [crumbs, heading, leadEl] }), meta?.length ? (_jsx("dl", { className: "flex flex-col gap-4 border-s border-line ps-6 @4xl:col-span-4 @4xl:col-start-9", ...field(editMode, "meta"), children: meta.slice(0, 3).map((m, i) => (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-subtle", children: m.label }), _jsx("dd", { className: "text-body text-fg", children: m.value })] }, i))) })) : null] }) }));
+    }
+    else {
+        content = (_jsxs(_Fragment, { children: [_jsxs(Container, { className: "flex flex-col gap-6", children: [crumbs, _jsxs("div", { className: "grid gap-x-(--gutter) gap-y-6 @4xl:grid-cols-12 @4xl:items-end", children: [_jsx("div", { className: "@4xl:col-span-7", children: heading }), leadEl ? _jsx("div", { className: "@4xl:col-span-5 @4xl:pb-[0.4em]", children: leadEl }) : null] })] }), variant === "with-media" && media ? (_jsx(Container, { size: "wide", className: "mt-[calc(var(--section-y)*0.5)] px-0! @6xl:px-(--gutter)!", children: _jsx(BlockImage, { ...media, aspect: "21:9", priority: true, sizes: "min(100vw, 90rem)", className: "@6xl:rounded-ui", components: components, labels: labels, editMode: editMode, field: "props.media" }) })) : null] }));
+    }
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: headingId, blockId: base, blockType: "page-intro", editMode: editMode, className: cn("vb-page-intro", className), "data-variant": variant, children: content }));
+}

package/dist/blocks/site/pricing-table.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { CtaStyle, MoneyValue } from "../schema/types.js";
+import type { RichDoc } from "../schema/rich-doc.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type SiteLink2 } from "./shared/kit-2.js";
+export type PricingVariant = "columns" | "rows" | "single";
+export type PricingBilling = "monthly" | "yearly" | "both" | "once";
+export interface PricingFeature {
+    text: React.ReactNode;
+    /** Default true. Excluded features read "Not included" (muted, a dash — never a cross). */
+    included?: boolean;
+    /** Small text under the feature ("up to 5 GB"). */
+    note?: React.ReactNode;
+}
+export interface PricingPlan {
+    name: React.ReactNode;
+    description?: React.ReactNode;
+    price?: {
+        monthly?: MoneyValue;
+        yearly?: MoneyValue;
+        once?: MoneyValue; /** "from $4,500". */
+        from?: boolean;
+    };
+    /** Shown instead of a price ("Get a quote", "Custom"). */
+    custom?: React.ReactNode;
+    features?: PricingFeature[];
+    cta?: {
+        link: SiteLink2;
+        style?: CtaStyle;
+    };
+    /** Highlight label ("Most chosen"). Adds a 2px accent rule — no glow, no scale. */
+    highlight?: React.ReactNode;
+}
+export interface PricingTableProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * columns: 2–4 plans separated by hairline rules, no cards. rows: agency packages as quote-like
+     * rows. single: one package — big price beside a two-column inclusion list.
+     */
+    variant?: PricingVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    /** Which prices exist. `both` adds a monthly/yearly switch (radios + `:has()`, 0 JS). Default `"monthly"`. */
+    billing?: PricingBilling;
+    /** Selected period when `billing="both"`. Default `"monthly"`. */
+    defaultPeriod?: "monthly" | "yearly";
+    /** Next to "Yearly": "2 months free" (text, never a strikethrough). */
+    yearlySaving?: React.ReactNode;
+    plans: PricingPlan[];
+    /** Required by D6-8: "VAT included", "Prices exclude 20% VAT". */
+    taxNote?: React.ReactNode;
+    /** Terms under the table (cancellation, payment). */
+    footnote?: React.ReactNode | RichDoc;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Plan pricing for SaaS subscriptions, agency packages and retainers. Money through `Intl` per
+ * locale and currency, a period suffix, a mandatory tax note. Server component; the
+ * monthly/yearly switch is plain radios (works without JS).
+ *
+ * ```tsx
+ * <PricingTable billing="both" yearlySaving="2 months free" taxNote="Prices exclude VAT."
+ *   plans={[{ name: "Studio", price: { monthly: { amount: "49", currency: "USD" }, yearly: { amount: "490", currency: "USD" } }, … }]} />
+ * ```
+ */
+export declare function PricingTable({ variant, eyebrow, title, lead, billing, defaultPeriod, yearlySaving, plans, taxNote, footnote, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: PricingTableProps): React.JSX.Element;

package/dist/blocks/site/pricing-table.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Minus } from "lucide-react";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { Section, Container } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { BlockLink } from "../block-link.js";
+import { RichText } from "../rich-text.js";
+import { site2Text } from "./shared/labels-2.js";
+import { fieldAttr, formatMoney, formatMoneyLong, useBlockIds2 } from "./shared/kit-2.js";
+/**
+ * Plan pricing for SaaS subscriptions, agency packages and retainers. Money through `Intl` per
+ * locale and currency, a period suffix, a mandatory tax note. Server component; the
+ * monthly/yearly switch is plain radios (works without JS).
+ *
+ * ```tsx
+ * <PricingTable billing="both" yearlySaving="2 months free" taxNote="Prices exclude VAT."
+ *   plans={[{ name: "Studio", price: { monthly: { amount: "49", currency: "USD" }, yearly: { amount: "490", currency: "USD" } }, … }]} />
+ * ```
+ */
+export function PricingTable({ variant = "columns", eyebrow, title, lead, billing = "monthly", defaultPeriod = "monthly", yearlySaving, plans, taxNote, footnote, id, anchor, theme, headingLevel = 2, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { base, headingId } = useBlockIds2(id, "pricing");
+    const single = variant === "single" || plans.length === 1;
+    const ctx = { t, locale, billing, components, labels, editMode };
+    // One primary per block: the highlighted plan, else the first plan asking for it.
+    const primaryIndex = Math.max(0, plans.findIndex((p) => p.highlight) >= 0 ? plans.findIndex((p) => p.highlight) : plans.findIndex((p) => p.cta?.style === "primary"));
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "pricing", editMode: editMode, className: cn("vb-pricing", className), "data-billing": billing, "data-variant": single ? "single" : variant, children: _jsxs(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: [title || eyebrow || lead || billing === "both" ? (_jsxs("div", { className: "flex flex-col gap-8 @4xl:flex-row @4xl:items-end @4xl:justify-between", children: [_jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale }), billing === "both" ? _jsx(BillingToggle, { name: `${base}-period`, defaultPeriod: defaultPeriod, saving: yearlySaving, t: t }) : null] })) : null, single ? (_jsx(SinglePlan, { plan: plans[0], ctx: ctx })) : variant === "rows" ? (_jsx("ol", { className: "flex flex-col border-b border-line", children: plans.map((plan, i) => (_jsx(PlanRow, { plan: plan, index: i, ctx: ctx, primary: i === primaryIndex }, i))) })) : (_jsx("ul", { className: "vb-plan-grid grid", "data-cols": Math.min(plans.length, 4), children: plans.map((plan, i) => (_jsx(PlanColumn, { plan: plan, index: i, ctx: ctx, primary: i === primaryIndex }, i))) })), taxNote || footnote ? (_jsxs("div", { className: "flex flex-col gap-2 border-t border-line pt-5 text-small text-fg-muted @2xl:flex-row @2xl:items-start @2xl:justify-between @2xl:gap-10", children: [taxNote ? (_jsx("p", { className: "shrink-0 font-mono text-eyebrow uppercase tracking-[0.08em]", ...fieldAttr(editMode, "taxNote"), children: taxNote })) : null, footnote ? (_jsx("div", { className: "max-w-(--measure) @2xl:text-end", ...fieldAttr(editMode, "footnote"), children: isRichDoc(footnote) ? _jsx(RichText, { doc: footnote, size: "sm", components: components, labels: labels, locale: locale }) : footnote })) : null] })) : null] }) }));
+}
+const isRichDoc = (v) => !!v && typeof v === "object" && v.type === "doc" && Array.isArray(v.content);
+function BillingToggle({ name, defaultPeriod, saving, t }) {
+    return (_jsxs("fieldset", { className: "vb-period flex shrink-0 flex-col gap-2", children: [_jsx("legend", { className: "sr-only", children: t("billingPeriod") }), _jsx("div", { className: "inline-flex w-fit rounded-ui border border-line p-1", children: ["monthly", "yearly"].map((p) => (_jsxs("label", { className: "vb-period-option group relative inline-flex h-10 cursor-pointer items-center gap-2 rounded-ui-sm px-4 text-sm font-medium text-fg-muted transition-colors hover:text-fg has-checked:text-scene has-checked:hover:text-scene", children: [_jsx("input", { type: "radio", name: name, value: p, defaultChecked: p === defaultPeriod, className: "vb-period-input peer sr-only" }), _jsx("span", { children: t(p) }), p === "yearly" && saving ? _jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-accent-ink group-has-checked:text-[color-mix(in_oklch,var(--scene)_80%,var(--accent))]", children: saving }) : null] }, p))) })] }));
+}
+function PriceBlock({ plan, ctx, size = "m" }) {
+    const { t, locale, billing } = ctx;
+    const numberClass = cn("font-display tabular tracking-[-0.02em] text-fg", size === "l" ? "text-display-l" : "text-display-m");
+    if (!plan.price || (!plan.price.monthly && !plan.price.yearly && !plan.price.once)) {
+        return plan.custom ? (_jsx("p", { className: numberClass, "data-price": "custom", children: plan.custom })) : null;
+    }
+    const one = (money, suffix, period) => Number(money.amount) === 0 ? (
+    // A zero price reads as "Free", without a period suffix.
+    _jsx("p", { "data-period": billing === "both" ? period : undefined, "data-price": "free", className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: _jsx("span", { className: numberClass, children: t("priceFree") }) }, period ?? "once")) : (_jsxs("p", { "data-period": billing === "both" ? period : undefined, className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [plan.price.from ? _jsx("span", { className: "text-small text-fg-muted", children: t("priceFrom") }) : null, _jsx("span", { className: numberClass, "aria-hidden": true, children: formatMoney(money, locale) }), _jsxs("span", { className: "sr-only", children: [plan.price.from ? `${t("priceFrom")} ` : "", formatMoneyLong(money, locale), " ", suffix] }), _jsx("span", { "aria-hidden": true, className: "text-small text-fg-muted", children: suffix })] }, period ?? "once"));
+    const p = plan.price;
+    if (billing === "once" || (!p.monthly && !p.yearly))
+        return p.once ? one(p.once, t("oneOff")) : null;
+    if (billing === "yearly")
+        return p.yearly ? one(p.yearly, t("perYear"), "yearly") : p.monthly ? one(p.monthly, t("perMonth"), "monthly") : null;
+    if (billing === "monthly")
+        return p.monthly ? one(p.monthly, t("perMonth"), "monthly") : p.yearly ? one(p.yearly, t("perYear"), "yearly") : null;
+    return (_jsxs(_Fragment, { children: [p.monthly ? one(p.monthly, t("perMonth"), "monthly") : null, p.yearly ? one(p.yearly, t("perYear"), "yearly") : null] }));
+}
+function FeatureList({ features, ctx, columns }) {
+    if (!features.length)
+        return null;
+    return (_jsx("ul", { className: cn("flex flex-col gap-3 text-small", columns && "@2xl:grid @2xl:grid-cols-2 @2xl:gap-x-8"), children: features.map((f, i) => {
+            const included = f.included !== false;
+            return (_jsxs("li", { className: cn("flex gap-3", !included && "text-fg-subtle"), children: [included ? _jsx(Check, { "aria-hidden": true, strokeWidth: 1.5, className: "mt-0.5 size-4 shrink-0 text-fg-muted" }) : _jsx(Minus, { "aria-hidden": true, strokeWidth: 1.5, className: "mt-0.5 size-4 shrink-0" }), _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsxs("span", { className: included ? "text-fg" : undefined, children: [!included ? _jsxs("span", { className: "sr-only", children: [ctx.t("notIncluded"), ": "] }) : null, f.text] }), f.note ? _jsx("span", { className: "text-xs text-fg-muted", children: f.note }) : null] })] }, i));
+        }) }));
+}
+function PlanCta({ plan, ctx, primary, index, block }) {
+    if (!plan.cta)
+        return null;
+    let style = plan.cta.style ?? "secondary";
+    if (style === "primary" && !primary)
+        style = "secondary";
+    if (primary && style !== "link")
+        style = "primary";
+    return (_jsx(BlockLink, { href: plan.cta.link.href, newTab: plan.cta.link.newTab, appearance: style, size: "lg", components: ctx.components, labels: ctx.labels, locale: ctx.locale, editMode: ctx.editMode, field: `props.plans.${index}.cta`, "data-track": `pricing:${index}`, className: cn(block && style !== "link" && "w-full"), children: plan.cta.link.label }));
+}
+function PlanColumn({ plan, index, ctx, primary }) {
+    return (_jsxs("li", { "data-highlight": plan.highlight ? "" : undefined, className: "vb-plan relative flex flex-col gap-7", children: [plan.highlight ? _jsx("span", { "aria-hidden": true, className: "vb-plan-rule absolute -top-px end-0 h-0.5 bg-accent" }) : null, _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", ...fieldAttr(ctx.editMode, `plans.${index}.name`), children: plan.name }), plan.highlight ? _jsx("span", { className: "rounded-full bg-accent-soft px-2.5 py-0.5 font-mono text-eyebrow uppercase tracking-[0.06em] text-accent-ink", children: plan.highlight }) : null] }), plan.description ? _jsx("p", { className: "max-w-[34ch] text-small text-fg-muted text-pretty", children: plan.description }) : null] }), _jsx(PriceBlock, { plan: plan, ctx: ctx }), _jsx(PlanCta, { plan: plan, ctx: ctx, primary: primary, index: index, block: true }), plan.features?.length ? (_jsx("div", { className: "border-t border-line pt-6", children: _jsx(FeatureList, { features: plan.features, ctx: ctx }) })) : null] }));
+}
+function PlanRow({ plan, index, ctx, primary }) {
+    const included = (plan.features ?? []).filter((f) => f.included !== false);
+    return (_jsxs("li", { "data-highlight": plan.highlight ? "" : undefined, className: cn("relative grid gap-x-(--gutter) gap-y-5 border-t border-line py-8 @4xl:grid-cols-12 @4xl:items-start", plan.highlight && "before:absolute before:-top-px before:start-0 before:h-0.5 before:w-16 before:bg-accent"), children: [_jsxs("div", { className: "flex flex-col gap-2 @4xl:col-span-4", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-3", children: [_jsx("span", { "aria-hidden": true, className: "font-mono text-eyebrow tabular text-fg-subtle", children: String(index + 1).padStart(2, "0") }), _jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", children: plan.name }), plan.highlight ? _jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-accent-ink", children: plan.highlight }) : null] }), plan.description ? _jsx("p", { className: "text-small text-fg-muted text-pretty", children: plan.description }) : null] }), _jsx("p", { className: "text-small text-fg-muted text-pretty @4xl:col-span-5", children: included.map((f, i) => (_jsxs(React.Fragment, { children: [i > 0 ? ", " : null, _jsx("span", { className: "text-fg", children: f.text })] }, i))) }), _jsxs("div", { className: "flex flex-col items-start gap-4 @4xl:col-span-3 @4xl:items-end @4xl:text-end", children: [_jsx(PriceBlock, { plan: plan, ctx: ctx }), _jsx(PlanCta, { plan: plan, ctx: ctx, primary: primary, index: index })] })] }));
+}
+function SinglePlan({ plan, ctx }) {
+    const features = plan.features ?? [];
+    const included = features.filter((f) => f.included !== false);
+    const excluded = features.filter((f) => f.included === false);
+    return (_jsxs("div", { className: "surface grid gap-x-(--gutter) gap-y-10 rounded-ui-lg p-6 @2xl:p-10 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-5", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", children: plan.name }), plan.highlight ? _jsx("span", { className: "rounded-full bg-accent-soft px-2.5 py-0.5 font-mono text-eyebrow uppercase tracking-[0.06em] text-accent-ink", children: plan.highlight }) : null] }), plan.description ? _jsx("p", { className: "text-small text-fg-muted text-pretty", children: plan.description }) : null] }), _jsx(PriceBlock, { plan: plan, ctx: ctx, size: "l" }), _jsx(PlanCta, { plan: plan, ctx: ctx, primary: true, index: 0 })] }), _jsxs("div", { className: "flex flex-col gap-6 @4xl:col-span-7 @4xl:border-s @4xl:border-line @4xl:ps-(--gutter)", children: [_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("included") }), _jsx(FeatureList, { features: included, ctx: ctx, columns: true }), excluded.length ? (_jsxs("p", { className: "border-t border-line pt-4 text-small text-fg-muted", children: [_jsxs("span", { className: "font-medium text-fg", children: [ctx.t("notIncluded"), ": "] }), excluded.map((f, i) => (_jsxs(React.Fragment, { children: [i > 0 ? ", " : null, f.text] }, i)))] })) : null] })] }));
+}

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type SiteBlockLabels, type SiteCta, type SiteImage } from "./_kit-1.js";
+export type StepsVariant = "vertical" | "horizontal" | "split";
+export interface StepsItem {
+    title: React.ReactNode;
+    /** A string renders as a paragraph; any other node (a code panel, a list) renders in a plain `div`. */
+    text?: React.ReactNode;
+    /** "1–2 weeks", "45 min". */
+    duration?: React.ReactNode;
+    media?: SiteImage;
+}
+export interface StepsProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * vertical: a thin rule along the start edge with mono numbers on it, a duration tag per step.
+     * horizontal: a timeline on wide containers (numbers above the line, text below); vertical when narrow.
+     * split: sticky title on the start side (4 cols), big hairline-separated numbered steps on the end side.
+     */
+    variant?: StepsVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    steps: StepsItem[];
+    /** Under the steps (≤ 2). */
+    actions?: SiteCta[];
+    labels?: SiteBlockLabels;
+}
+/**
+ * "How we work" — discovery → design → launch; a first spa visit; SaaS setup. An ordered list
+ * (the order is announced; the numbers are visual). Server component.
+ *
+ * ```tsx
+ * <Steps title="How a project *runs*" steps={[{ title: "Discovery", text: "…", duration: "1 week" }]} />
+ * ```
+ */
+export declare function Steps({ variant, eyebrow, title, lead, steps, actions, id, theme, anchor, className, headingLevel, labels, locale, components, editMode }: StepsProps): React.JSX.Element;

package/dist/blocks/site/process.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { CtaList, indexLabel, useBlockIds } from "./_kit-1.js";
+/**
+ * "How we work" — discovery → design → launch; a first spa visit; SaaS setup. An ordered list
+ * (the order is announced; the numbers are visual). Server component.
+ *
+ * ```tsx
+ * <Steps title="How a project *runs*" steps={[{ title: "Discovery", text: "…", duration: "1 week" }]} />
+ * ```
+ */
+export function Steps({ variant = "vertical", eyebrow, title, lead, steps, actions, id, theme, anchor, className, headingLevel = 2, labels, locale, components, editMode }) {
+    const { base, headingId } = useBlockIds(id, "steps");
+    const StepTag = `h${Math.min(headingLevel + 1, 6)}`;
+    const f = (i, k) => (editMode ? { "data-field": `props.steps.${i}.${k}` } : undefined);
+    const stepTitle = (s, i, cls) => (_jsx(StepTag, { className: cn("text-h3 font-semibold tracking-[-0.012em] text-fg text-balance", cls), ...f(i, "title"), children: s.title }));
+    const stepText = (s, i) => {
+        if (!s.text)
+            return null;
+        const Tag = typeof s.text === "string" || typeof s.text === "number" ? "p" : "div";
+        return (_jsx(Tag, { className: cn("text-body text-fg-muted text-pretty", Tag === "p" ? "max-w-[52ch]" : "flex min-w-0 flex-col gap-3"), ...f(i, "text"), children: s.text }));
+    };
+    const duration = (s, i) => s.duration ? (_jsx("span", { className: "inline-flex w-fit items-center rounded-full border border-line px-2.5 py-0.5 font-mono text-[0.6875rem] tabular tracking-[0.04em] text-fg-muted", ...f(i, "duration"), children: s.duration })) : null;
+    const media = (s) => (s.media ? _jsx(BlockImage, { ...s.media, aspect: "3:2", sizes: "(min-width: 56rem) 30vw, 100vw", className: "mt-2 max-w-md rounded-ui", components: components, labels: labels }) : null);
+    const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, align: variant === "horizontal" && lead ? "split" : "start", headingLevel: headingLevel, headingId: headingId, editMode: editMode, labels: labels, locale: locale }) : null;
+    const actionsEl = actions?.length ? _jsx(CtaList, { actions: actions, components: components, labels: labels, locale: locale, editMode: editMode }) : null;
+    let content;
+    if (variant === "split") {
+        content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12", children: [_jsx("div", { className: "@4xl:col-span-4", children: _jsxs("div", { className: "flex flex-col gap-8 @4xl:sticky @4xl:top-[calc(var(--vb-nav-h,4.5rem)+2rem)]", children: [header, actionsEl] }) }), _jsx("ol", { className: "flex flex-col @4xl:col-span-7 @4xl:col-start-6", children: steps.map((s, i) => (_jsxs("li", { className: "grid grid-cols-[auto_1fr] gap-x-[clamp(1.25rem,4cqi,3rem)] gap-y-3 border-t border-line py-8 last:border-b", children: [_jsx("span", { "aria-hidden": true, className: "row-span-4 font-display text-display-m leading-none tabular text-fg-subtle", children: indexLabel(i) }), stepTitle(s, i, "pt-1"), stepText(s, i), duration(s, i), media(s)] }, i))) })] }));
+    }
+    else if (variant === "horizontal") {
+        content = (_jsxs(Container, { className: "flex flex-col gap-[calc(var(--section-y)*0.4)]", children: [header, _jsx("ol", { className: "vb-steps-h grid gap-y-0 @4xl:gap-x-(--gutter)", style: { "--vb-steps": steps.length }, children: steps.map((s, i) => (_jsxs("li", { className: "vb-step relative flex flex-col gap-3 ps-10 pb-10 @4xl:ps-0 @4xl:pb-0", children: [_jsx("span", { "aria-hidden": true, className: "vb-step-num font-mono text-eyebrow tabular text-fg-muted", children: indexLabel(i) }), _jsx("span", { "aria-hidden": true, className: cn("vb-step-dot", i === 0 && "vb-step-dot-first") }), _jsxs("div", { className: "flex flex-col gap-3 @4xl:pt-6", children: [stepTitle(s, i), stepText(s, i), duration(s, i), media(s)] })] }, i))) }), actionsEl] }));
+    }
+    else {
+        content = (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-8 @4xl:col-span-5", children: [header, actionsEl] }), _jsx("ol", { className: "vb-steps-v flex flex-col @4xl:col-span-6 @4xl:col-start-7", children: steps.map((s, i) => (_jsxs("li", { className: "vb-step relative flex flex-col gap-3 ps-12 pb-10 last:pb-0", children: [_jsx("span", { "aria-hidden": true, className: cn("vb-step-badge absolute start-0 top-0 inline-flex size-8 items-center justify-center rounded-full border border-line bg-scene font-mono text-[0.6875rem] tabular text-fg-muted", i === 0 && "vb-step-badge-first"), children: indexLabel(i) }), _jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 pt-1", children: [stepTitle(s, i), duration(s, i)] }), stepText(s, i), media(s)] }, i))) })] }));
+    }
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: base, blockType: "steps", editMode: editMode, className: cn("vb-steps", className), "data-variant": variant, children: _jsx("div", { className: "vb-reveal", children: content }) }));
+}