@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/blocks/site/shared/brand-icons.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn2 as cn } from "./kit-2.js";
+const PATHS = {
+    whatsapp: (_jsx("path", { d: "M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.42.25-.69.25-1.29.18-1.41-.08-.13-.28-.2-.57-.35m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.88 9.88m8.41-18.3A11.81 11.81 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.89a11.82 11.82 0 0 0-3.48-8.41Z" })),
+    instagram: (_jsx("path", { fillRule: "evenodd", d: "M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9a5.5 5.5 0 0 1-5.5 5.5h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4h-9ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.25-3.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z" })),
+    facebook: _jsx("path", { d: "M13.5 22v-8.2h2.75l.42-3.2H13.5V8.56c0-.93.26-1.56 1.59-1.56h1.7V4.14A22.6 22.6 0 0 0 14.31 4C11.86 4 10.2 5.49 10.2 8.24v2.36H7.44v3.2h2.76V22h3.3Z" }),
+    linkedin: (_jsx("path", { d: "M5.34 3A2.17 2.17 0 1 1 5.33 7.35 2.17 2.17 0 0 1 5.34 3ZM3.46 8.98h3.75V21H3.46V8.98ZM9.56 8.98h3.6v1.64h.05c.5-.95 1.72-1.95 3.55-1.95 3.8 0 4.5 2.5 4.5 5.75V21h-3.74v-5.84c0-1.4-.03-3.19-1.94-3.19-1.95 0-2.25 1.52-2.25 3.09V21H9.56V8.98Z" })),
+    x: _jsx("path", { d: "M17.75 3h3.07l-6.7 7.66L22 21h-6.17l-4.83-6.32L5.47 21H2.4l7.17-8.2L2 3h6.33l4.37 5.78L17.75 3Zm-1.08 16.17h1.7L7.4 4.73H5.58l11.09 14.44Z" }),
+    youtube: (_jsx("path", { fillRule: "evenodd", d: "M22.54 7.2a2.76 2.76 0 0 0-1.94-1.96C18.88 4.78 12 4.78 12 4.78s-6.88 0-8.6.46A2.76 2.76 0 0 0 1.46 7.2C1 8.93 1 12.5 1 12.5s0 3.57.46 5.3a2.76 2.76 0 0 0 1.94 1.96c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.76 2.76 0 0 0 1.94-1.96c.46-1.73.46-5.3.46-5.3s0-3.57-.46-5.3ZM9.75 15.77V9.23l5.75 3.27-5.75 3.27Z" })),
+    tiktok: _jsx("path", { d: "M16.6 2h-3.3v13.17a2.85 2.85 0 1 1-2.85-2.85c.3 0 .59.05.86.13V9.1a6.19 6.19 0 1 0 5.29 6.12V8.68a7.6 7.6 0 0 0 4.4 1.4V6.77A4.4 4.4 0 0 1 16.6 2.4V2Z" }),
+    telegram: (_jsx("path", { d: "M21.94 4.3 18.8 19.13c-.24 1.05-.86 1.31-1.74.82l-4.8-3.54-2.32 2.23c-.26.26-.47.47-.97.47l.35-4.89 8.9-8.04c.39-.35-.08-.54-.6-.19l-11 6.93-4.74-1.48c-1.03-.32-1.05-1.03.21-1.52L20.6 2.82c.86-.32 1.6.19 1.34 1.48Z" })),
+    messenger: (_jsx("path", { d: "M12 2C6.36 2 2 6.13 2 11.7c0 2.91 1.2 5.43 3.14 7.17.17.15.27.36.27.58l.06 1.78a.8.8 0 0 0 1.12.71l1.98-.88a.8.8 0 0 1 .54-.04c.91.25 1.87.38 2.89.38 5.64 0 10-4.13 10-9.7S17.64 2 12 2Zm6 7.46-2.94 4.66a1.5 1.5 0 0 1-2.17.4l-2.34-1.75a.6.6 0 0 0-.72 0l-3.16 2.4c-.42.32-.97-.18-.69-.63l2.94-4.66a1.5 1.5 0 0 1 2.17-.4l2.34 1.75a.6.6 0 0 0 .72 0l3.16-2.4c.42-.32.97.18.69.63Z" })),
+    "google-maps": (_jsx("path", { fillRule: "evenodd", d: "M12 1.5a7.5 7.5 0 0 0-7.5 7.5c0 5.4 6.27 12.4 6.84 13.03a.9.9 0 0 0 1.32 0C13.23 21.4 19.5 14.4 19.5 9A7.5 7.5 0 0 0 12 1.5Zm0 4.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z" })),
+    "apple-maps": (_jsx("path", { fillRule: "evenodd", d: "M6 2h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4Zm10.9 4.1-9.6 4.1c-.6.26-.5 1.13.13 1.25l3.82.73.73 3.82c.12.64 1 .73 1.25.13l4.1-9.6a.33.33 0 0 0-.43-.43Z" })),
+    "yandex-maps": (_jsx("path", { fillRule: "evenodd", d: "M12 1.5a7.5 7.5 0 0 0-7.5 7.5c0 5.4 6.27 12.4 6.84 13.03a.9.9 0 0 0 1.32 0C13.23 21.4 19.5 14.4 19.5 9A7.5 7.5 0 0 0 12 1.5ZM10.4 5h1.9c1.9 0 3 .9 3 2.6 0 1.2-.6 2-1.6 2.4l1.9 3.6h-1.8l-1.7-3.3h-.2v3.3h-1.5V5Zm1.5 1.25v2.5h.4c.9 0 1.4-.4 1.4-1.25 0-.85-.5-1.25-1.4-1.25h-.4Z" })),
+    waze: (_jsx("path", { fillRule: "evenodd", d: "M12.5 2.5c5 0 9 3.6 9 8.2 0 2.9-1.6 5.3-4 6.8a2 2 0 1 1-3.9.9h-2.6a2 2 0 0 1-3.94-.35A7.6 7.6 0 0 1 3.5 15c.9-.3 1.5-1.1 1.5-2.3v-2C5 6.1 8.3 2.5 12.5 2.5Zm-2.25 6.25a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm4.5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-5 3.6a.6.6 0 0 0-.5.9 3.6 3.6 0 0 0 6.1 0 .6.6 0 0 0-1-.65 2.4 2.4 0 0 1-4.1 0 .6.6 0 0 0-.5-.25Z" })),
+    email: _jsx("path", { fillRule: "evenodd", d: "M3.5 4h17A1.5 1.5 0 0 1 22 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 18.5v-13A1.5 1.5 0 0 1 3.5 4Zm.5 2.3V18h16V6.3l-7.4 5.55a1 1 0 0 1-1.2 0L4 6.3ZM5.7 6l6.3 4.72L18.3 6H5.7Z" }),
+    phone: (_jsx("path", { d: "M7.2 2.5c.5 0 .95.32 1.1.8l1.2 3.6c.14.43 0 .9-.34 1.19L7.6 9.4a13 13 0 0 0 7 7l1.3-1.56c.29-.35.76-.48 1.19-.34l3.6 1.2c.48.15.8.6.8 1.1v3.2c0 .64-.52 1.17-1.17 1.16C10.9 21.06 2.94 13.1 2.84 3.67 2.83 3.02 3.36 2.5 4 2.5h3.2Z" })),
+};
+/** Human names for networks ("LinkedIn", "Google Maps") — for aria-labels and link text. */
+export const BRAND_NAMES = {
+    whatsapp: "WhatsApp",
+    instagram: "Instagram",
+    facebook: "Facebook",
+    linkedin: "LinkedIn",
+    x: "X",
+    youtube: "YouTube",
+    tiktok: "TikTok",
+    telegram: "Telegram",
+    messenger: "Messenger",
+    "google-maps": "Google Maps",
+    "apple-maps": "Apple Maps",
+    "yandex-maps": "Yandex Maps",
+    waze: "Waze",
+    email: "Email",
+    phone: "Phone",
+};
+/**
+ * A brand mark (WhatsApp, Instagram, LinkedIn, X, YouTube, TikTok, Telegram, maps providers…).
+ * Monochrome `currentColor`, 20px by default, never boxed in a coloured tile (D6-3).
+ *
+ * ```tsx
+ * <a href="https://instagram.com/meyhane" aria-label="Instagram"><BrandIcon name="instagram" /></a>
+ * ```
+ */
+export function BrandIcon({ name, title, className, ...props }) {
+    const path = PATHS[name];
+    if (!path)
+        return null;
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", role: title ? "img" : undefined, "aria-hidden": title ? undefined : true, "aria-label": title, focusable: "false", className: cn("size-5 shrink-0", className), ...props, children: path }));
+}
+/** `https://wa.me/<digits>?text=<encoded>` from an E.164 number. */
+export function waLink(e164, text) {
+    const digits = e164.replace(/\D/g, "");
+    return `https://wa.me/${digits}${text ? `?text=${encodeURIComponent(text)}` : ""}`;
+}

package/dist/blocks/site/shared/consent-gate.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type ConsentCategory } from "./consent.js";
+export interface ConsentGateProps {
+    /** The iframe URL loaded after consent or a click (maps, YouTube, Vimeo, Calendly). */
+    src: string;
+    /** Iframe `title` (required for screen readers): "Map of Meyhane Rasimpaşa". */
+    title: string;
+    /** Consent category that loads the embed automatically. Default `"functional"`. */
+    category?: ConsentCategory;
+    /** Button text: "Load map". */
+    loadLabel: string;
+    /** One line under the button: "The map loads from Google Maps, which may set cookies." */
+    notice?: React.ReactNode;
+    /** Offer "Always load maps" — grants `category` for the whole site. */
+    rememberLabel?: string;
+    /** CSS aspect-ratio of the frame. Default `"4 / 3"`. */
+    aspect?: string;
+    /** Iframe `allow` (video: "autoplay; encrypted-media; picture-in-picture"). */
+    allow?: string;
+    /** Load immediately (the user already clicked something that means "show it"). */
+    defaultLoaded?: boolean;
+    /** Banner version; an older stored answer doesn't count. */
+    version?: number;
+    /** The static preview (an image). Painted under the button, decorative. */
+    children?: React.ReactNode;
+    className?: string;
+    /** Classes for the facade button. */
+    buttonClassName?: string;
+}
+/**
+ * Facade for third-party embeds: a static preview with one button. The iframe loads only after
+ * a click or when the visitor has already granted `category` — never before (privacy law and
+ * performance). ~0.5 KB.
+ *
+ * ```tsx
+ * <ConsentGate src="https://www.google.com/maps?q=…&output=embed" title="Map of Meyhane Rasimpaşa" loadLabel="Load map">
+ *   <BlockImage src="/map-static.png" decorative aspect="4:3" />
+ * </ConsentGate>
+ * ```
+ */
+export declare function ConsentGate({ src, title, category, loadLabel, notice, rememberLabel, aspect, allow, defaultLoaded, version, children, className, buttonClassName, }: ConsentGateProps): React.JSX.Element;

package/dist/blocks/site/shared/consent-gate.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn2 as cn } from "./kit-2.js";
+import { getConsent, onConsent, readConsent, writeConsent } from "./consent.js";
+/**
+ * Facade for third-party embeds: a static preview with one button. The iframe loads only after
+ * a click or when the visitor has already granted `category` — never before (privacy law and
+ * performance). ~0.5 KB.
+ *
+ * ```tsx
+ * <ConsentGate src="https://www.google.com/maps?q=…&output=embed" title="Map of Meyhane Rasimpaşa" loadLabel="Load map">
+ *   <BlockImage src="/map-static.png" decorative aspect="4:3" />
+ * </ConsentGate>
+ * ```
+ */
+export function ConsentGate({ src, title, category = "functional", loadLabel, notice, rememberLabel, aspect = "4 / 3", allow, defaultLoaded = false, version, children, className, buttonClassName, }) {
+    const [loaded, setLoaded] = React.useState(defaultLoaded);
+    const [remember, setRemember] = React.useState(false);
+    const frameRef = React.useRef(null);
+    const focusOnLoad = React.useRef(false);
+    React.useEffect(() => {
+        if (loaded)
+            return;
+        if (getConsent(category, version)) {
+            setLoaded(true);
+            return;
+        }
+        return onConsent(category, () => setLoaded(true));
+    }, [category, version, loaded]);
+    React.useEffect(() => {
+        if (loaded && focusOnLoad.current)
+            frameRef.current?.focus();
+    }, [loaded]);
+    return (_jsx("div", { "data-consent-gate": "", "data-loaded": loaded ? "" : undefined, className: cn("vb-gate relative overflow-hidden rounded-ui bg-surface-2", className), style: { aspectRatio: aspect }, children: loaded ? (_jsx("iframe", { ref: frameRef, src: src, title: title, allow: allow, loading: "lazy", referrerPolicy: "strict-origin-when-cross-origin", allowFullScreen: true, className: "absolute inset-0 size-full border-0" })) : (_jsxs(_Fragment, { children: [children ? (_jsx("div", { "aria-hidden": true, className: "vb-gate-preview absolute inset-0 [&_.vb-image]:size-full", children: children })) : null, _jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start gap-2 p-4 @2xl:p-5", children: [_jsx("button", { type: "button", onClick: () => {
+                                if (remember) {
+                                    const prev = readConsent();
+                                    writeConsent({ functional: prev?.c.functional === 1, analytics: prev?.c.analytics === 1, marketing: prev?.c.marketing === 1, [category]: true }, version ?? prev?.v ?? 1);
+                                }
+                                focusOnLoad.current = true;
+                                setLoaded(true);
+                            }, className: cn("surface-popover inline-flex h-11 items-center gap-2 rounded-ui px-4 text-sm font-medium text-fg transition-colors hover:bg-hover focus-ring", buttonClassName), children: loadLabel }), notice || rememberLabel ? (_jsxs("div", { className: "vb-gate-note flex max-w-[44ch] flex-col gap-1.5 rounded-ui-sm px-2 py-1 text-xs text-fg-muted", children: [notice ? _jsx("p", { children: notice }) : null, rememberLabel ? (_jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-fg", children: [_jsx("input", { type: "checkbox", checked: remember, onChange: (e) => setRemember(e.target.checked), className: "vb-check size-3.5" }), rememberLabel] })) : null] })) : null] })] })) }));
+}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { type ConsentCategory, type ConsentRecord } from "./consent.js";
+import type { ConsentLabels } from "./island-keys.js";
+export interface ConsentBannerIslandProps {
+    variant: "bar" | "box";
+    /** Server-rendered notice text. */
+    text: React.ReactNode;
+    policyLink?: {
+        href: string;
+        label: string;
+    };
+    categories: ConsentCategory[];
+    version: number;
+    position: "bottom" | "bottom-start";
+    regionMode: "opt-in" | "notice";
+    labels: ConsentLabels;
+    /** Render inside the parent (docs previews) instead of fixed to the viewport. */
+    contained?: boolean;
+    /** Show even when a choice is stored (previews). */
+    forceShow?: boolean;
+    /** Start with preferences open (previews). */
+    defaultPreferencesOpen?: boolean;
+    /** Called with every record — for a server-side proof log. Client prop only. */
+    onRecord?: (record: ConsentRecord) => void | Promise<void>;
+    className?: string;
+}
+/**
+ * The interactive part of the Cookie / consent banner (~3 KB). Not modal: a labelled region that
+ * never blocks the page or steals focus. "Reject all" and "Accept all" are equal secondary
+ * buttons on the first layer; preferences open in a Dialog with one Switch per category, none
+ * pre-checked. Renders nothing until mounted (no non-essential cookies without JS).
+ */
+export declare function ConsentBannerIsland({ variant, text, policyLink, categories, version, position, regionMode, labels, contained, forceShow, defaultPreferencesOpen, onRecord, className, }: ConsentBannerIslandProps): React.JSX.Element;
+/** "Cookie settings" — a button (not a link) that reopens the preferences. For the footer. */
+export declare function ConsentSettingsButton({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;

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

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn2 as cn } from "./kit-2.js";
+import { Button } from "../../../components/button.js";
+import { Switch } from "../../../components/switch.js";
+import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader } from "../../../components/dialog.js";
+import { CONSENT_OPEN_EVENT, readConsent, writeConsent, openConsentPreferences } from "./consent.js";
+const CAT_LABEL = {
+    necessary: ["catNecessary", "catNecessaryHint"],
+    functional: ["catFunctional", "catFunctionalHint"],
+    analytics: ["catAnalytics", "catAnalyticsHint"],
+    marketing: ["catMarketing", "catMarketingHint"],
+};
+/**
+ * The interactive part of the Cookie / consent banner (~3 KB). Not modal: a labelled region that
+ * never blocks the page or steals focus. "Reject all" and "Accept all" are equal secondary
+ * buttons on the first layer; preferences open in a Dialog with one Switch per category, none
+ * pre-checked. Renders nothing until mounted (no non-essential cookies without JS).
+ */
+export function ConsentBannerIsland({ variant, text, policyLink, categories, version, position, regionMode, labels, contained, forceShow, defaultPreferencesOpen, onRecord, className, }) {
+    const [visible, setVisible] = React.useState(false);
+    const [prefsOpen, setPrefsOpen] = React.useState(!!defaultPreferencesOpen);
+    const optional = categories.filter((c) => c !== "necessary");
+    const [choices, setChoices] = React.useState({});
+    const titleId = React.useId();
+    React.useEffect(() => {
+        const stored = readConsent(version);
+        if (stored)
+            setChoices({ functional: !!stored.c.functional, analytics: !!stored.c.analytics, marketing: !!stored.c.marketing });
+        setVisible(forceShow || !stored);
+        const open = () => {
+            const r = readConsent(version);
+            if (r)
+                setChoices({ functional: !!r.c.functional, analytics: !!r.c.analytics, marketing: !!r.c.marketing });
+            setPrefsOpen(true);
+        };
+        window.addEventListener(CONSENT_OPEN_EVENT, open);
+        return () => window.removeEventListener(CONSENT_OPEN_EVENT, open);
+    }, [version, forceShow]);
+    const save = (c) => {
+        const record = writeConsent(c, version);
+        void onRecord?.(record);
+        setChoices(c);
+        setPrefsOpen(false);
+        if (!forceShow)
+            setVisible(false);
+    };
+    const all = (on) => Object.fromEntries(optional.map((k) => [k, on]));
+    const preferences = (_jsx(Dialog, { open: prefsOpen, onOpenChange: setPrefsOpen, children: _jsxs(DialogContent, { size: "md", children: [_jsx(DialogHeader, { title: labels.cookiePreferences, description: labels.cookiePreferencesLead }), _jsxs(DialogBody, { children: [_jsx("ul", { className: "flex flex-col", children: categories.map((cat) => {
+                                const [name, hint] = CAT_LABEL[cat];
+                                const locked = cat === "necessary";
+                                return (_jsx("li", { className: "border-b border-line py-4 last:border-b-0", children: _jsx(Switch, { label: labels[name], description: locked ? `${labels[hint]} ${labels.alwaysOn}.` : labels[hint], labelPosition: "start", checked: locked ? true : !!choices[cat], disabled: locked, onCheckedChange: (v) => setChoices((p) => ({ ...p, [cat]: v })) }) }, cat));
+                            }) }), policyLink ? (_jsx("p", { className: "mt-4 text-small text-fg-muted", children: _jsx("a", { href: policyLink.href, className: "font-medium text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", children: policyLink.label }) })) : null] }), _jsxs(DialogFooter, { align: "between", children: [_jsx(Button, { variant: "secondary", onClick: () => save(all(false)), children: labels.rejectAll }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "secondary", onClick: () => save(all(true)), children: labels.acceptAll }), _jsx(Button, { variant: "solid", onClick: () => save(choices), children: labels.savePreferences })] })] })] }) }));
+    if (!visible)
+        return preferences;
+    const box = variant === "box";
+    return (_jsxs(_Fragment, { children: [_jsx("div", { role: "region", "aria-labelledby": titleId, "data-consent-banner": "", "data-variant": variant, "data-position": position, "data-contained": contained ? "" : undefined, className: cn("vb-consent surface-popover text-small text-fg", box ? "vb-consent-box rounded-ui-lg p-5" : "vb-consent-bar", className), children: _jsx("div", { className: "@container", children: _jsxs("div", { className: cn(box ? "flex flex-col gap-4" : "vb-container flex flex-col gap-4 py-4 @3xl:flex-row @3xl:items-center @3xl:justify-between @3xl:gap-10"), children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx("p", { id: titleId, className: cn(box ? "text-body font-semibold text-fg" : "sr-only"), children: box ? labels.cookies : labels.cookieConsent }), _jsxs("div", { className: "max-w-[72ch] text-fg-muted text-pretty [&_a]:font-medium [&_a]:text-fg [&_a]:underline [&_a]:underline-offset-[0.25em]", children: [text, policyLink ? (_jsxs(_Fragment, { children: [" ", _jsx("a", { href: policyLink.href, className: "focus-ring rounded-[2px]", children: policyLink.label })] })) : null] })] }), _jsxs("div", { className: cn("flex shrink-0 flex-wrap items-center gap-2", box && "flex-col items-stretch"), children: [regionMode === "opt-in" ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: () => save(all(false)), className: cn(box && "w-full"), children: labels.rejectAll }), _jsx(Button, { variant: "secondary", onClick: () => save(all(true)), className: cn(box && "w-full"), children: labels.acceptAll })] })) : (_jsx(Button, { variant: "secondary", onClick: () => save(all(true)), className: cn(box && "w-full"), children: labels.acceptAll })), _jsx(Button, { variant: "ghost", onClick: () => setPrefsOpen(true), className: cn("underline decoration-line underline-offset-[0.3em]", box && "w-full"), children: labels.preferences })] })] }) }) }), preferences] }));
+}
+/** "Cookie settings" — a button (not a link) that reopens the preferences. For the footer. */
+export function ConsentSettingsButton({ children, className }) {
+    return (_jsx("button", { type: "button", onClick: () => openConsentPreferences(), className: cn("rounded-[2px] underline-offset-[0.25em] hover:underline focus-ring", className), children: children }));
+}

package/dist/blocks/site/shared/consent.d.ts

@@ -0,0 +1,49 @@
+export type ConsentCategory = "necessary" | "functional" | "analytics" | "marketing";
+export type OptionalCategory = Exclude<ConsentCategory, "necessary">;
+export declare const CONSENT_CATEGORIES: readonly ConsentCategory[];
+export declare const CONSENT_COOKIE = "vb_consent";
+/** Fired on `window` after every choice: `detail` is the record. */
+export declare const CONSENT_EVENT = "vb:consent";
+/** Fire on `window` to open the preferences dialog (Footer "Cookie settings"). */
+export declare const CONSENT_OPEN_EVENT = "vb:consent-open";
+export interface ConsentRecord {
+    /** Banner version the visitor answered; a newer version asks again. */
+    v: number;
+    /** Unix seconds of the choice. */
+    t: number;
+    c: Record<OptionalCategory, 0 | 1>;
+}
+export type ConsentChoices = Partial<Record<OptionalCategory, boolean>>;
+/** Reads the record from a cookie string (`document.cookie` or a request's Cookie header). */
+export declare function parseConsent(cookie: string | undefined | null, name?: string): ConsentRecord | null;
+/** The record as a cookie value. */
+export declare const serializeConsent: (r: ConsentRecord) => string;
+/** The visitor's current record, or null (never answered, or answered an older `version`). */
+export declare function readConsent(version?: number): ConsentRecord | null;
+/** True when `category` may be used now. `necessary` is always true. */
+export declare function getConsent(category: ConsentCategory, version?: number): boolean;
+/** Google Consent Mode v2 signals for a set of choices. */
+export declare function consentModeSignals(c: ConsentChoices | ConsentRecord["c"]): Record<string, "granted" | "denied">;
+/** Saves a choice: cookie, Consent Mode update, `vb:consent` event. Returns the record. */
+export declare function writeConsent(choices: ConsentChoices, version?: number, opts?: {
+    days?: number;
+    cookieName?: string;
+}): ConsentRecord;
+/** Calls `fn` now (if already granted) and whenever `category` becomes granted. Returns an unsubscribe. */
+export declare function onConsent(category: ConsentCategory, fn: (record: ConsentRecord | null) => void): () => void;
+/** Opens the preferences dialog of the mounted `ConsentBanner`. */
+export declare function openConsentPreferences(): void;
+/**
+ * Inline `<head>` snippet: Consent Mode v2 defaults (everything denied except security), then an
+ * immediate update from a stored choice, before any Google tag loads.
+ *
+ * ```tsx
+ * <head><script dangerouslySetInnerHTML={{ __html: consentDefaultsScript() }} /></head>
+ * ```
+ */
+export declare function consentDefaultsScript(opts?: {
+    waitForUpdate?: number;
+    version?: number;
+    regionMode?: "opt-in" | "notice";
+    region?: string[];
+}): string;

package/dist/blocks/site/shared/consent.js

@@ -0,0 +1,130 @@
+// Consent state — a first-party cookie, a DOM event and Google Consent Mode v2. React-free and
+// server-safe: every DOM access is guarded, `parseConsent` also runs on the server (cookie header).
+//
+// Cookie: vb_consent={"v":3,"t":1762761600,"c":{"functional":1,"analytics":0,"marketing":0}} (6 months)
+export const CONSENT_CATEGORIES = ["necessary", "functional", "analytics", "marketing"];
+export const CONSENT_COOKIE = "vb_consent";
+/** Fired on `window` after every choice: `detail` is the record. */
+export const CONSENT_EVENT = "vb:consent";
+/** Fire on `window` to open the preferences dialog (Footer "Cookie settings"). */
+export const CONSENT_OPEN_EVENT = "vb:consent-open";
+const SIX_MONTHS = 182;
+/** Reads the record from a cookie string (`document.cookie` or a request's Cookie header). */
+export function parseConsent(cookie, name = CONSENT_COOKIE) {
+    if (!cookie)
+        return null;
+    const hit = cookie.split(/;\s*/).find((c) => c.startsWith(`${name}=`));
+    if (!hit)
+        return null;
+    try {
+        const raw = JSON.parse(decodeURIComponent(hit.slice(name.length + 1)));
+        if (typeof raw.v !== "number" || !raw.c || typeof raw.c !== "object")
+            return null;
+        const c = raw.c;
+        return { v: raw.v, t: Number(raw.t) || 0, c: { functional: c.functional ? 1 : 0, analytics: c.analytics ? 1 : 0, marketing: c.marketing ? 1 : 0 } };
+    }
+    catch {
+        return null;
+    }
+}
+/** The record as a cookie value. */
+export const serializeConsent = (r) => encodeURIComponent(JSON.stringify(r));
+/** The visitor's current record, or null (never answered, or answered an older `version`). */
+export function readConsent(version) {
+    if (typeof document === "undefined")
+        return null;
+    const r = parseConsent(document.cookie);
+    if (!r)
+        return null;
+    if (version !== undefined && r.v < version)
+        return null;
+    return r;
+}
+/** True when `category` may be used now. `necessary` is always true. */
+export function getConsent(category, version) {
+    if (category === "necessary")
+        return true;
+    return readConsent(version)?.c[category] === 1;
+}
+/** Google Consent Mode v2 signals for a set of choices. */
+export function consentModeSignals(c) {
+    const on = (k) => (c[k] ? "granted" : "denied");
+    return {
+        ad_storage: on("marketing"),
+        ad_user_data: on("marketing"),
+        ad_personalization: on("marketing"),
+        analytics_storage: on("analytics"),
+        functionality_storage: on("functional"),
+        personalization_storage: on("functional"),
+        security_storage: "granted",
+    };
+}
+/** Saves a choice: cookie, Consent Mode update, `vb:consent` event. Returns the record. */
+export function writeConsent(choices, version = 1, opts = {}) {
+    const record = {
+        v: version,
+        t: Math.floor(Date.now() / 1000),
+        c: { functional: choices.functional ? 1 : 0, analytics: choices.analytics ? 1 : 0, marketing: choices.marketing ? 1 : 0 },
+    };
+    if (typeof document !== "undefined") {
+        const secure = typeof location !== "undefined" && location.protocol === "https:" ? "; secure" : "";
+        document.cookie = `${opts.cookieName ?? CONSENT_COOKIE}=${serializeConsent(record)}; max-age=${(opts.days ?? SIX_MONTHS) * 86400}; path=/; samesite=lax${secure}`;
+    }
+    if (typeof window !== "undefined") {
+        const w = window;
+        w.gtag?.("consent", "update", consentModeSignals(record.c));
+        window.dispatchEvent(new CustomEvent(CONSENT_EVENT, { detail: record }));
+    }
+    return record;
+}
+/** Calls `fn` now (if already granted) and whenever `category` becomes granted. Returns an unsubscribe. */
+export function onConsent(category, fn) {
+    if (typeof window === "undefined")
+        return () => { };
+    let fired = false;
+    const check = (r) => {
+        const granted = category === "necessary" || r?.c[category] === 1;
+        if (granted && !fired) {
+            fired = true;
+            fn(r);
+        }
+    };
+    check(readConsent());
+    const handler = (e) => check(e.detail ?? readConsent());
+    window.addEventListener(CONSENT_EVENT, handler);
+    return () => window.removeEventListener(CONSENT_EVENT, handler);
+}
+/** Opens the preferences dialog of the mounted `ConsentBanner`. */
+export function openConsentPreferences() {
+    if (typeof window !== "undefined")
+        window.dispatchEvent(new Event(CONSENT_OPEN_EVENT));
+}
+/**
+ * Inline `<head>` snippet: Consent Mode v2 defaults (everything denied except security), then an
+ * immediate update from a stored choice, before any Google tag loads.
+ *
+ * ```tsx
+ * <head><script dangerouslySetInnerHTML={{ __html: consentDefaultsScript() }} /></head>
+ * ```
+ */
+export function consentDefaultsScript(opts = {}) {
+    const deny = opts.regionMode === "notice" ? "granted" : "denied";
+    const defaults = {
+        ad_storage: deny,
+        ad_user_data: deny,
+        ad_personalization: deny,
+        analytics_storage: deny,
+        functionality_storage: deny,
+        personalization_storage: deny,
+        security_storage: "granted",
+        wait_for_update: opts.waitForUpdate ?? 500,
+        ...(opts.region ? { region: opts.region } : null),
+    };
+    const v = opts.version ?? 1;
+    return [
+        "window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}",
+        `gtag('consent','default',${JSON.stringify(defaults)});`,
+        "gtag('set','ads_data_redaction',true);",
+        `try{var m=document.cookie.match(/(?:^|; )${CONSENT_COOKIE}=([^;]*)/);if(m){var r=JSON.parse(decodeURIComponent(m[1]));if(r&&r.v>=${v}&&r.c){var g=function(k){return r.c[k]?'granted':'denied'};gtag('consent','update',{ad_storage:g('marketing'),ad_user_data:g('marketing'),ad_personalization:g('marketing'),analytics_storage:g('analytics'),functionality_storage:g('functional'),personalization_storage:g('functional')});}}}catch(e){}`,
+    ].join("");
+}

package/dist/blocks/site/shared/contact-form-island.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type ContactFieldConfig, type SiteFormAction, type SiteFormState } from "./site-form.js";
+import type { ContactIslandLabels } from "./island-keys.js";
+export interface ContactFormIslandProps {
+    /** The app's server action, or a URL for a plain POST. Without it the form validates in the browser only (previews). */
+    action?: SiteFormAction | string;
+    /** Field config; `label` already resolved. */
+    fields: (ContactFieldConfig & {
+        label: string;
+    })[];
+    labels: ContactIslandLabels;
+    locale?: string;
+    layout?: "split" | "stacked" | "minimal";
+    submitLabel?: string;
+    /** Rendered in place of the form after a successful submit. */
+    successMessage?: React.ReactNode;
+    /** Privacy notice link; with `privacyCheckbox` a required (never pre-checked) checkbox. */
+    privacy?: {
+        href: string;
+        label?: string;
+        checkbox?: boolean;
+    };
+    /** Separate, optional marketing consent checkbox. */
+    marketingConsent?: boolean;
+    /** Shown with server errors: "call us on …". */
+    fallbackPhone?: {
+        href: string;
+        label: string;
+    };
+    /** Render a given state (docs, tests, server-rendered results). */
+    initialState?: SiteFormState;
+    /** Base for field ids. */
+    idBase: string;
+    className?: string;
+}
+/**
+ * Client island of the Contact form: `useActionState` + the app's server action, honeypot and time
+ * trap, an error summary that links to fields, focus management, and the same states without JS
+ * (native constraints + full round trip). ~2 KB.
+ */
+export declare function ContactFormIsland({ action, fields, labels, locale, layout, submitLabel, successMessage, privacy, marketingConsent, fallbackPhone, initialState, idBase, className, }: ContactFormIslandProps): React.JSX.Element;

package/dist/blocks/site/shared/contact-form-island.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowRight } from "lucide-react";
+import { cn2 as cn } from "./kit-2.js";
+import { formatMessage } from "../../../lib/message-format.js";
+import { Button } from "../../../components/button.js";
+import { Field, Input, Textarea } from "../../../components/input.js";
+import { NativeSelect } from "../../../components/native-select.js";
+import { HONEYPOT_FIELD, MARKETING_FIELD, PRIVACY_FIELD, TIMESTAMP_FIELD, fieldConstraints, validateContactForm, } from "./site-form.js";
+const IDLE = { status: "idle" };
+/**
+ * Client island of the Contact form: `useActionState` + the app's server action, honeypot and time
+ * trap, an error summary that links to fields, focus management, and the same states without JS
+ * (native constraints + full round trip). ~2 KB.
+ */
+export function ContactFormIsland({ action, fields, labels, locale = "en-US", layout = "stacked", submitLabel, successMessage, privacy, marketingConsent, fallbackPhone, initialState, idBase, className, }) {
+    const f = (k, vars) => formatMessage(labels[k], vars, locale);
+    const run = React.useCallback(async (prev, data) => {
+        // Same rules as the server, so most mistakes never need a round trip. Spam is the server's call.
+        const check = validateContactForm(fields, data, { privacyCheckbox: privacy?.checkbox, labels, locale });
+        if (!check.ok)
+            return { status: "invalid", errors: check.errors, values: check.values, ts: Date.now() };
+        if (typeof action === "function") {
+            try {
+                return await action(prev, data);
+            }
+            catch (e) {
+                return { status: "error", message: e instanceof Error ? e.message : undefined, values: check.values, ts: Date.now() };
+            }
+        }
+        return { status: "success", ts: Date.now() };
+    }, [action, fields, labels, locale, privacy?.checkbox]);
+    const [state, formAction, pending] = React.useActionState(run, initialState ?? IDLE);
+    const [hydrated, setHydrated] = React.useState(false);
+    const [ts, setTs] = React.useState("");
+    const summaryRef = React.useRef(null);
+    const successRef = React.useRef(null);
+    const firstRender = React.useRef(true);
+    React.useEffect(() => {
+        setHydrated(true);
+        setTs(String(Date.now()));
+    }, []);
+    React.useEffect(() => {
+        // Never move focus on mount (a server-rendered result must not yank the page).
+        if (firstRender.current) {
+            firstRender.current = false;
+            return;
+        }
+        if (state.status === "success")
+            successRef.current?.focus();
+        else if (state.status === "invalid" || state.status === "error")
+            summaryRef.current?.focus();
+    }, [state]);
+    if (state.status === "success") {
+        return (_jsxs("div", { ref: successRef, tabIndex: -1, role: "status", "data-form-state": "success", className: cn("vb-form-success flex flex-col gap-3 rounded-ui py-2 outline-none", className), children: [_jsx("span", { "aria-hidden": true, className: "h-px w-10 bg-accent" }), _jsx("div", { className: "text-lead text-fg text-pretty", children: successMessage ?? f("sent") })] }));
+    }
+    const errors = state.status === "invalid" ? (state.errors ?? {}) : {};
+    const errorEntries = Object.entries(errors).filter(([, v]) => v);
+    const values = state.values ?? {};
+    const fid = (name) => `${idBase}-${name}`;
+    const minimal = layout === "minimal";
+    const half = (n) => !minimal && (n === "name" || n === "email" || n === "phone" || n === "company" || n === "budget" || n === "date");
+    const urlAction = typeof action === "string" ? action : undefined;
+    return (_jsxs("form", { action: urlAction ?? formAction, method: urlAction ? "post" : undefined, noValidate: hydrated && !urlAction, "data-form-state": pending ? "submitting" : state.status, "aria-busy": pending || undefined, className: cn("vb-form flex flex-col gap-6", className), children: [errorEntries.length > 0 ? (_jsxs("div", { ref: summaryRef, tabIndex: -1, role: "alert", className: "vb-form-alert flex flex-col gap-2 rounded-ui border-s-2 border-danger bg-surface-2 px-4 py-3 text-small outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("p", { className: "font-medium text-fg", children: f("errorSummary", { count: errorEntries.length }) }), _jsx("ul", { className: "flex flex-col gap-1", children: errorEntries.map(([name, msg]) => (_jsx("li", { children: _jsx("a", { href: `#${fid(name)}`, className: "text-danger underline decoration-current/40 underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", children: msg }) }, name))) })] })) : null, state.status === "error" ? (_jsxs("div", { ref: summaryRef, tabIndex: -1, role: "alert", className: "vb-form-alert flex flex-col gap-1 rounded-ui border-s-2 border-danger bg-surface-2 px-4 py-3 text-small outline-none", children: [_jsx("p", { className: "font-medium text-fg", children: f("errorServer") }), fallbackPhone ? (_jsx("p", { className: "text-fg-muted", children: f("errorServerCall", { phone: "\u0000" })
+                            .split("\u0000")
+                            .flatMap((part, i) => i === 0
+                            ? [part]
+                            : [
+                                _jsx("a", { href: fallbackPhone.href, className: "font-medium text-fg underline underline-offset-[0.25em] focus-ring rounded-[2px]", children: fallbackPhone.label }, "p"),
+                                part,
+                            ]) })) : state.message ? (_jsx("p", { className: "text-fg-muted", children: state.message })) : null] })) : null, _jsxs("div", { className: cn("grid gap-x-5 gap-y-5", minimal ? "@2xl:grid-cols-[1fr_1fr_auto] @2xl:items-end" : "@xl:grid-cols-2"), children: [fields.map((field) => {
+                        const c = fieldConstraints(field);
+                        const id = fid(field.name);
+                        const err = errors[field.name];
+                        const common = { id, name: field.name, required: field.required, defaultValue: values[field.name] ?? "", placeholder: field.placeholder };
+                        let control;
+                        if (field.options?.length) {
+                            control = _jsx(NativeSelect, { ...common, placeholder: field.placeholder ?? f("choose"), items: field.options.map((o) => ({ value: o, label: o })) });
+                        }
+                        else if (field.name === "message") {
+                            control = _jsx(Textarea, { ...common, rows: minimal ? 2 : 5, maxLength: c.maxLength });
+                        }
+                        else {
+                            control = _jsx(Input, { ...common, type: c.type, autoComplete: c.autoComplete, inputMode: c.inputMode, maxLength: c.maxLength });
+                        }
+                        return (_jsx("div", { className: cn("min-w-0", !half(field.name) && !minimal && "@xl:col-span-2", minimal && field.name === "message" && "@2xl:col-span-2"), children: _jsx(Field, { label: field.label, hint: field.hint, error: err, required: field.required, labels: { optional: labels.optional }, children: control }) }, field.name));
+                    }), minimal ? (_jsx(SubmitButton, { pending: pending, label: submitLabel ?? f("send"), pendingLabel: f("sending"), className: "@2xl:col-start-3 @2xl:row-start-1 @2xl:self-end" })) : null] }), _jsxs("div", { "aria-hidden": "true", className: "vb-hp", children: [_jsxs("label", { children: [labels.honeypot, _jsx("input", { type: "text", name: HONEYPOT_FIELD, tabIndex: -1, autoComplete: "off", defaultValue: "" })] }), _jsx("input", { type: "hidden", name: TIMESTAMP_FIELD, value: ts, readOnly: true })] }), privacy || marketingConsent ? (_jsxs("div", { className: "flex flex-col gap-3 text-small text-fg-muted", children: [privacy ? (privacy.checkbox ? (_jsx(ConsentCheck, { id: fid(PRIVACY_FIELD), name: PRIVACY_FIELD, required: true, error: errors[PRIVACY_FIELD], children: _jsx(PrivacySentence, { template: labels.privacyRead, href: privacy.href, linkLabel: privacy.label ?? labels.privacyLink }) })) : (_jsx("p", { className: "text-pretty", children: _jsx(PrivacySentence, { template: labels.privacyRead, href: privacy.href, linkLabel: privacy.label ?? labels.privacyLink }) }))) : null, marketingConsent ? (_jsx(ConsentCheck, { id: fid(MARKETING_FIELD), name: MARKETING_FIELD, children: labels.marketingConsent })) : null] })) : null, !minimal ? _jsx(SubmitButton, { pending: pending, label: submitLabel ?? f("send"), pendingLabel: f("sending"), className: "self-start" }) : null] }, state.ts ?? 0));
+}
+function SubmitButton({ pending, label, pendingLabel, className }) {
+    return (_jsxs(Button, { type: "submit", variant: "primary", size: "lg", loading: pending, loadingText: pendingLabel, className: cn("vb-action-primary", className), children: [label, pending ? null : _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.75, className: "vb-arrow rtl:-scale-x-100" })] }));
+}
+function PrivacySentence({ template, href, linkLabel }) {
+    const [before, after] = template.split("{link}");
+    return (_jsxs(_Fragment, { children: [before, _jsx("a", { href: href, className: "font-medium text-fg underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", children: linkLabel }), after] }));
+}
+function ConsentCheck({ id, name, required, error, children }) {
+    const errId = `${id}-error`;
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("label", { htmlFor: id, className: "flex cursor-pointer items-start gap-3 text-pretty", children: [_jsx("input", { id: id, type: "checkbox", name: name, required: required, "aria-invalid": error ? true : undefined, "aria-describedby": error ? errId : undefined, className: "vb-check mt-0.5 size-4 shrink-0" }), _jsx("span", { children: children })] }), error ? (_jsx("p", { id: errId, className: "ps-7 text-small text-danger", children: error })) : null] }));
+}

package/dist/blocks/site/shared/copy-link.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { ShareLabels } from "./island-keys.js";
+export interface CopyLinkButtonProps {
+    /** URL to copy. Default: the current page. */
+    url?: string;
+    labels: ShareLabels;
+    className?: string;
+}
+/** "Copy link" for the article share row (~0.3 KB). Announces "Link copied" politely. */
+export declare function CopyLinkButton({ url, labels, className }: CopyLinkButtonProps): React.JSX.Element;

package/dist/blocks/site/shared/copy-link.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Link2 } from "lucide-react";
+import { cn2 as cn } from "./kit-2.js";
+/** "Copy link" for the article share row (~0.3 KB). Announces "Link copied" politely. */
+export function CopyLinkButton({ url, labels, className }) {
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        if (!copied)
+            return;
+        const id = window.setTimeout(() => setCopied(false), 2000);
+        return () => window.clearTimeout(id);
+    }, [copied]);
+    return (_jsxs("button", { type: "button", onClick: async () => {
+            const href = url ?? window.location.href;
+            try {
+                await navigator.clipboard?.writeText(href);
+            }
+            catch {
+                /* clipboard blocked: still confirm, the URL is in the address bar */
+            }
+            setCopied(true);
+        }, className: cn("vb-share-btn", className), children: [copied ? _jsx(Check, { "aria-hidden": true, strokeWidth: 1.5, className: "size-4" }) : _jsx(Link2, { "aria-hidden": true, strokeWidth: 1.5, className: "size-4" }), _jsx("span", { children: labels.copyLink }), _jsx("span", { role: "status", className: "sr-only", children: copied ? labels.linkCopied : "" })] }));
+}