@vamos-ui/react 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,111 @@
+// Contact-form contract: field config, the action state, and a validator the app's server action
+// calls with the same config the form was rendered from. React-free, zod-free, server-safe.
+import { formatMessage } from "../../../lib/message-format.js";
+import { site2Labels } from "./labels-2.js";
+/** Name of the honeypot input. Real visitors never see or fill it. */
+export const HONEYPOT_FIELD = "website";
+/** Hidden render timestamp for the time trap. */
+export const TIMESTAMP_FIELD = "_ts";
+export const PRIVACY_FIELD = "privacy";
+export const MARKETING_FIELD = "marketing";
+const LABEL_KEY = {
+    name: "fieldName",
+    email: "fieldEmail",
+    phone: "fieldPhone",
+    company: "fieldCompany",
+    subject: "fieldSubject",
+    budget: "fieldBudget",
+    message: "fieldMessage",
+    date: "fieldDate",
+};
+/** The label shown for a field: config label → `labels` → English. */
+export function contactFieldLabel(field, labels) {
+    if (field.label)
+        return field.label;
+    const k = LABEL_KEY[field.name];
+    const v = labels ? labels[k] : undefined;
+    return typeof v === "string" ? v : site2Labels[k];
+}
+/** True for honeypot hits and submits faster than `minMs` after render (bots). */
+export function isSpam(data, opts = {}) {
+    const trap = data.get(HONEYPOT_FIELD);
+    if (typeof trap === "string" && trap.trim() !== "")
+        return true;
+    const ts = Number(data.get(TIMESTAMP_FIELD));
+    if (ts > 0 && (opts.now ?? Date.now()) - ts < (opts.minMs ?? 2500))
+        return true;
+    return false;
+}
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+const PHONE_RE = /^\+?[\d\s().-]{7,20}$/;
+/**
+ * Validates a submission against the field config the form was rendered with. Call it first in
+ * the app's server action — the browser runs it too, but only the server's verdict counts.
+ *
+ * ```ts
+ * "use server";
+ * export async function contact(prev: SiteFormState, data: FormData) {
+ *   const v = validateContactForm(fields, data, { privacyCheckbox: true });
+ *   if (v.spam) return { status: "success" };
+ *   if (!v.ok) return v.state;
+ *   await crm.createLead(v.values);
+ *   return { status: "success" };
+ * }
+ * ```
+ */
+export function validateContactForm(fields, data, opts = {}) {
+    const merged = { ...site2Labels };
+    if (opts.labels)
+        for (const [k, v] of Object.entries(opts.labels))
+            if (typeof v === "string")
+                merged[k] = v;
+    const t = (k, vars) => formatMessage(merged[k] ?? k, vars, opts.locale ?? "en-US");
+    const values = {};
+    const errors = {};
+    for (const f of fields) {
+        const raw = data.get(f.name);
+        const v = typeof raw === "string" ? raw.trim() : "";
+        values[f.name] = v;
+        const label = contactFieldLabel(f, merged);
+        const max = f.max ?? (f.name === "message" ? 2000 : 160);
+        if (!v) {
+            if (f.required)
+                errors[f.name] = t("errorRequired", { field: label.toLowerCase() });
+            continue;
+        }
+        if (v.length > max)
+            errors[f.name] = t("errorTooLong", { field: label.toLowerCase(), max });
+        else if (f.name === "email" && !EMAIL_RE.test(v))
+            errors[f.name] = t("errorEmail");
+        else if (f.name === "phone" && !PHONE_RE.test(v))
+            errors[f.name] = t("errorPhone");
+        else if (f.options?.length && !f.options.includes(v))
+            errors[f.name] = t("errorRequired", { field: label.toLowerCase() });
+    }
+    const privacy = data.get(PRIVACY_FIELD) === "on" || data.get(PRIVACY_FIELD) === "true";
+    const marketing = data.get(MARKETING_FIELD) === "on" || data.get(MARKETING_FIELD) === "true";
+    if (opts.privacyCheckbox && !privacy)
+        errors[PRIVACY_FIELD] = t("privacyRequired");
+    const spam = isSpam(data, { minMs: opts.spamMinMs });
+    const ok = Object.keys(errors).length === 0;
+    const state = spam ? { status: "success", ts: Date.now() } : ok ? { status: "success", ts: Date.now() } : { status: "invalid", errors, values, ts: Date.now() };
+    return { ok, spam, values, errors, privacy, marketing, state };
+}
+/** HTML constraints for a field (the no-JS path relies on these). */
+export function fieldConstraints(f) {
+    const maxLength = f.max ?? (f.name === "message" ? 2000 : 160);
+    switch (f.name) {
+        case "name":
+            return { type: "text", autoComplete: "name", maxLength };
+        case "email":
+            return { type: "email", autoComplete: "email", inputMode: "email", maxLength };
+        case "phone":
+            return { type: "tel", autoComplete: "tel", inputMode: "tel", maxLength };
+        case "company":
+            return { type: "text", autoComplete: "organization", maxLength };
+        case "date":
+            return { type: "date", maxLength };
+        default:
+            return { type: "text", maxLength };
+    }
+}

package/dist/blocks/site/shared/site-routing.d.ts

@@ -0,0 +1,54 @@
+/**
+ * URL helpers of the Site shell: which page and locale a URL (or a link's href) points to,
+ * and the href for a page. Pure and server-safe, so server components can build links.
+ *
+ *   ?page=pricing            → page "pricing" (search routing, the default)
+ *   ?page=home#faq           → page "home", then scroll to #faq
+ *   #page=pricing            → page "pricing" (hash routing)
+ *   ?lang=tr                 → locale "tr", page unchanged
+ */
+export type SiteRouting = "search" | "hash" | "memory";
+export interface SiteLocation {
+    page?: string;
+    locale?: string;
+    /** In-page anchor after the page switch (`faq` for `#faq`). */
+    anchor?: string;
+}
+export interface SiteRouteParams {
+    /** Query/hash key for the page. Default `"page"`. */
+    pageParam?: string;
+    /** Query key for the locale. Default `"lang"`. */
+    localeParam?: string;
+}
+/**
+ * The href for an inner page, merged into nothing (relative to the current URL):
+ * `sitePageHref("pricing")` → `"?page=pricing"`, `sitePageHref("home", "faq")` → `"?page=home#faq"`.
+ */
+export declare function sitePageHref(page: string, anchor?: string, options?: SiteRouteParams & {
+    routing?: SiteRouting;
+}): string;
+/** The href that switches the locale: `siteLocaleHref("tr")` → `"?lang=tr"`. */
+export declare const siteLocaleHref: (locale: string, options?: SiteRouteParams) => string;
+/**
+ * Reads a link's href as a site location, or `null` when it is not a shell link (a path, an
+ * external URL, a plain `#anchor`). Only relative hrefs that start with `?` or `#<pageParam>=`.
+ */
+export declare function parseSiteHref(href: string | null | undefined, options?: SiteRouteParams): SiteLocation | null;
+/** Reads the current location (`search` + `hash`) as page and locale. */
+export declare function readSiteLocation(search: string, hash: string, routing: SiteRouting, options?: SiteRouteParams): SiteLocation;
+/**
+ * The URL after a change: other query params are kept, the default page and locale are left out
+ * so the home page stays at a clean URL.
+ */
+export declare function writeSiteLocation(current: {
+    pathname: string;
+    search: string;
+    hash: string;
+}, next: {
+    page: string;
+    locale: string;
+    anchor?: string;
+}, defaults: {
+    page: string;
+    locale: string;
+}, routing: SiteRouting, options?: SiteRouteParams): string;

package/dist/blocks/site/shared/site-routing.js

@@ -0,0 +1,86 @@
+/**
+ * URL helpers of the Site shell: which page and locale a URL (or a link's href) points to,
+ * and the href for a page. Pure and server-safe, so server components can build links.
+ *
+ *   ?page=pricing            → page "pricing" (search routing, the default)
+ *   ?page=home#faq           → page "home", then scroll to #faq
+ *   #page=pricing            → page "pricing" (hash routing)
+ *   ?lang=tr                 → locale "tr", page unchanged
+ */
+/**
+ * The href for an inner page, merged into nothing (relative to the current URL):
+ * `sitePageHref("pricing")` → `"?page=pricing"`, `sitePageHref("home", "faq")` → `"?page=home#faq"`.
+ */
+export function sitePageHref(page, anchor, options = {}) {
+    const key = options.pageParam ?? "page";
+    const enc = encodeURIComponent(page);
+    if (options.routing === "hash")
+        return `#${key}=${enc}`;
+    return `?${key}=${enc}${anchor ? `#${anchor}` : ""}`;
+}
+/** The href that switches the locale: `siteLocaleHref("tr")` → `"?lang=tr"`. */
+export const siteLocaleHref = (locale, options = {}) => `?${options.localeParam ?? "lang"}=${encodeURIComponent(locale)}`;
+/**
+ * Reads a link's href as a site location, or `null` when it is not a shell link (a path, an
+ * external URL, a plain `#anchor`). Only relative hrefs that start with `?` or `#<pageParam>=`.
+ */
+export function parseSiteHref(href, options = {}) {
+    if (!href)
+        return null;
+    const pageKey = options.pageParam ?? "page";
+    const langKey = options.localeParam ?? "lang";
+    if (href.startsWith(`#${pageKey}=`)) {
+        const page = decodeURIComponent(href.slice(pageKey.length + 2));
+        return page ? { page } : null;
+    }
+    if (!href.startsWith("?"))
+        return null;
+    const hashAt = href.indexOf("#");
+    const query = new URLSearchParams(hashAt === -1 ? href.slice(1) : href.slice(1, hashAt));
+    const anchor = hashAt === -1 ? undefined : href.slice(hashAt + 1) || undefined;
+    const page = query.get(pageKey) ?? undefined;
+    const locale = query.get(langKey) ?? undefined;
+    if (!page && !locale)
+        return null;
+    return { page, locale, anchor };
+}
+/** Reads the current location (`search` + `hash`) as page and locale. */
+export function readSiteLocation(search, hash, routing, options = {}) {
+    const pageKey = options.pageParam ?? "page";
+    const q = new URLSearchParams(search);
+    const locale = q.get(options.localeParam ?? "lang") ?? undefined;
+    let page;
+    if (routing === "hash") {
+        const m = new RegExp(`^#${pageKey}=([^&]*)`).exec(hash);
+        page = m?.[1] ? decodeURIComponent(m[1]) : undefined;
+    }
+    else if (routing === "search") {
+        page = q.get(pageKey) ?? undefined;
+    }
+    return { page, locale };
+}
+/**
+ * The URL after a change: other query params are kept, the default page and locale are left out
+ * so the home page stays at a clean URL.
+ */
+export function writeSiteLocation(current, next, defaults, routing, options = {}) {
+    const pageKey = options.pageParam ?? "page";
+    const langKey = options.localeParam ?? "lang";
+    const q = new URLSearchParams(current.search);
+    if (next.locale === defaults.locale)
+        q.delete(langKey);
+    else
+        q.set(langKey, next.locale);
+    let hash = next.anchor ? `#${next.anchor}` : "";
+    if (routing === "search") {
+        if (next.page === defaults.page)
+            q.delete(pageKey);
+        else
+            q.set(pageKey, next.page);
+    }
+    else if (routing === "hash") {
+        hash = next.page === defaults.page ? "" : `#${pageKey}=${encodeURIComponent(next.page)}`;
+    }
+    const qs = q.toString();
+    return `${current.pathname}${qs ? `?${qs}` : ""}${hash}`;
+}

package/dist/blocks/site/shared/testimonials-carousel.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { CarouselLabels } from "./island-keys.js";
+export interface TestimonialsCarouselProps {
+    /** Section header, rendered beside the arrows. */
+    header?: React.ReactNode;
+    count: number;
+    labels: CarouselLabels;
+    locale?: string;
+    /** One child per slide (server-rendered quotes). */
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Scroll-snap carousel island (~1 KB): native swipe/scroll, arrow buttons, a "3 / 8" counter,
+ * ←/→ keys on the track. No autoplay. Slides are labelled groups (WAI-ARIA carousel pattern).
+ */
+export declare function TestimonialsCarousel({ header, count, labels, locale, children, className }: TestimonialsCarouselProps): React.JSX.Element;

package/dist/blocks/site/shared/testimonials-carousel.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { cn2 as cn } from "./kit-2.js";
+import { formatMessage } from "../../../lib/message-format.js";
+/**
+ * Scroll-snap carousel island (~1 KB): native swipe/scroll, arrow buttons, a "3 / 8" counter,
+ * ←/→ keys on the track. No autoplay. Slides are labelled groups (WAI-ARIA carousel pattern).
+ */
+export function TestimonialsCarousel({ header, count, labels, locale = "en-US", children, className }) {
+    const track = React.useRef(null);
+    const [current, setCurrent] = React.useState(0);
+    const f = (k, v) => formatMessage(labels[k], v, locale);
+    const slides = React.Children.toArray(children);
+    const slideEls = () => Array.from(track.current?.children ?? []);
+    const go = React.useCallback((i) => {
+        const el = track.current;
+        const target = Array.from(el?.children ?? [])[Math.max(0, Math.min(count - 1, i))];
+        if (!el || !target)
+            return;
+        const rtl = getComputedStyle(el).direction === "rtl";
+        const left = rtl ? target.offsetLeft + target.offsetWidth - el.clientWidth : target.offsetLeft - el.offsetLeft;
+        const reduce = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (typeof el.scrollTo === "function")
+            el.scrollTo({ left, behavior: reduce ? "auto" : "smooth" });
+        setCurrent(Math.max(0, Math.min(count - 1, i)));
+    }, [count]);
+    React.useEffect(() => {
+        const el = track.current;
+        if (!el || typeof IntersectionObserver === "undefined")
+            return;
+        const io = new IntersectionObserver((entries) => {
+            const visible = entries.filter((e) => e.isIntersecting && e.intersectionRatio > 0.6);
+            if (visible.length) {
+                const first = visible.map((e) => slideEls().indexOf(e.target)).sort((a, b) => a - b)[0];
+                if (first !== undefined && first >= 0)
+                    setCurrent(first);
+            }
+        }, { root: el, threshold: [0.6] });
+        for (const s of slideEls())
+            io.observe(s);
+        return () => io.disconnect();
+    }, [count]);
+    return (_jsxs("div", { role: "region", "aria-roledescription": labels.carousel, "aria-label": labels.carousel, className: cn("vb-carousel flex flex-col gap-10", className), children: [_jsxs("div", { className: "flex flex-col gap-6 @2xl:flex-row @2xl:items-end @2xl:justify-between", children: [header ?? _jsx("span", {}), _jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [_jsx("span", { className: "font-mono text-eyebrow tabular uppercase tracking-[0.08em] text-fg-muted", "aria-live": "polite", children: f("slideCounter", { index: current + 1, total: count }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", "aria-label": labels.previous, disabled: current === 0, onClick: () => go(current - 1), className: "vb-carousel-btn", children: _jsx(ArrowLeft, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[18px] rtl:-scale-x-100" }) }), _jsx("button", { type: "button", "aria-label": labels.next, disabled: current >= count - 1, onClick: () => go(current + 1), className: "vb-carousel-btn", children: _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[18px] rtl:-scale-x-100" }) })] })] })] }), _jsx("div", { ref: track, tabIndex: 0, "aria-label": labels.carousel, onKeyDown: (e) => {
+                    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+                    if (e.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
+                        e.preventDefault();
+                        go(current + 1);
+                    }
+                    else if (e.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
+                        e.preventDefault();
+                        go(current - 1);
+                    }
+                    else if (e.key === "Home") {
+                        e.preventDefault();
+                        go(0);
+                    }
+                    else if (e.key === "End") {
+                        e.preventDefault();
+                        go(count - 1);
+                    }
+                }, className: "vb-carousel-track scrollbar-none -mx-1 flex snap-x snap-mandatory gap-(--gutter) overflow-x-auto px-1 pb-1 focus-ring rounded-ui-sm", children: slides.map((child, i) => (_jsx("div", { role: "group", "aria-roledescription": labels.slide, "aria-label": f("slideLabel", { index: i + 1, total: count }), className: "w-full shrink-0 snap-start border-t border-line pt-6 @2xl:w-[calc((100%-var(--gutter))/2)]", children: child }, i))) })] }));
+}

package/dist/blocks/site/site-shell.d.ts

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { type SiteLocation, type SiteRouting } from "./shared/site-routing.js";
+export interface SiteShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "dir"> {
+    /**
+     * The site's accent: a built-in preset (`"lime"`, `"ocean"`, `"ember"`, `"rose"`, `"graphite"`)
+     * or one brand colour (`"#B4532A"`, `rgb()`, `oklch()`). A colour becomes the four accent
+     * variables on the site root, contrast-checked (text on the fill and accent ink ≥ 4.5:1).
+     */
+    accent?: string;
+    /** Explicit dark-mode fill for a custom accent. Derived when the colour is too dark. */
+    accentDark?: string;
+    /** Type pairing → `data-font` (editorial, grotesk, corporate, system or your own). */
+    font?: string;
+    /** Surface material → `data-material`. */
+    material?: "glass" | "solid";
+    /** → `data-density`. */
+    density?: "comfortable" | "compact" | "spacious";
+    /** Force a mode for the whole site. Default: inherit the page's. */
+    theme?: "light" | "dark";
+    dir?: "ltr" | "rtl";
+    /** Locale codes, default first. Default `["en", "tr"]`. */
+    locales?: string[];
+    /** Controlled locale. */
+    locale?: string;
+    defaultLocale?: string;
+    onLocaleChange?: (locale: string) => void;
+    /** Page ids, home first. Default `["home"]`. */
+    pages?: string[];
+    /** Controlled page. */
+    page?: string;
+    defaultPage?: string;
+    onPageChange?: (page: string) => void;
+    /** Where the page lives in the URL: `?page=` (default), `#page=`, or nowhere. The locale always uses `?lang=`. */
+    routing?: SiteRouting;
+    /** Query/hash key for the page. Default `"page"`. */
+    pageParam?: string;
+    /** Query key for the locale. Default `"lang"`. */
+    localeParam?: string;
+}
+export interface SiteShellContextValue {
+    page: string;
+    locale: string;
+    pages: readonly string[];
+    locales: readonly string[];
+    /** Go to a page and/or locale (and optionally an anchor on it). */
+    navigate: (to: SiteLocation) => void;
+    /** The href for a page (respects `routing` and `pageParam`). */
+    hrefFor: (page: string, anchor?: string) => string;
+}
+/** Page, locale and navigation of the closest Site shell. Throws outside one. */
+export declare function useSiteShell(): SiteShellContextValue;
+/**
+ * The frame of a demo or single-route website: EN/TR switch, inner-page switching and the
+ * site's own look (accent from one colour, font, material, density), scoped to its root.
+ *
+ * Every language and page is rendered on the server as plain blocks; the shell shows one of
+ * each and swaps on links like `?page=pricing`, `?page=home#faq` or `?lang=tr` inside it —
+ * so server-rendered Navbar and Footer links work as they are. On a page change it scrolls to
+ * the top of the site, moves focus to the page's `h1` and marks matching links
+ * `aria-current="page"`. Back/forward follow the URL. Overlays opened inside keep its theme.
+ *
+ * ```tsx
+ * <SiteShell accent="#B4532A" font="editorial" material="solid" pages={["home", "shop"]}>
+ *   <Navbar items={[{ label: "Shop", href: "?page=shop" }]} … />
+ *   <SiteShellPage id="home"><Hero … /></SiteShellPage>
+ *   <SiteShellPage id="shop"><PageIntro title="Shop" … /></SiteShellPage>
+ * </SiteShell>
+ * ```
+ */
+export declare const SiteShell: React.ForwardRefExoticComponent<SiteShellProps & React.RefAttributes<HTMLDivElement>>;
+export interface SiteShellPageProps {
+    /** Page id from the shell's `pages`. */
+    id: string;
+    /** Document title while this page is shown (set after navigating, not on first load). */
+    title?: string;
+    children?: React.ReactNode;
+}
+/** One inner page: rendered only while it is the shell's current page. */
+export declare function SiteShellPage({ id, title, children }: SiteShellPageProps): React.JSX.Element | null;
+export interface SiteShellLocaleProps {
+    /** Locale code from the shell's `locales`. */
+    code: string;
+    children?: React.ReactNode;
+}
+/** One language version: rendered only while it is the shell's current locale (with `lang`). */
+export declare function SiteShellLocale({ code, children }: SiteShellLocaleProps): React.JSX.Element | null;
+export interface SiteShellLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    /** Target page id. */
+    page: string;
+    /** In-page anchor on that page (`"faq"`). */
+    anchor?: string;
+}
+/**
+ * A link to an inner page for client code. Server components can use a plain
+ * `href={sitePageHref("pricing")}` instead; the shell handles both.
+ */
+export declare const SiteShellLink: React.ForwardRefExoticComponent<SiteShellLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/blocks/site/site-shell.js

@@ -0,0 +1,227 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { ThemeScope } from "../../lib/theme-scope.js";
+import { useControllableState } from "../../lib/use-controllable-state.js";
+import { isBuiltInAccent, siteAccent, siteAccentCss, siteAccentKey } from "./shared/site-accent.js";
+import { parseSiteHref, readSiteLocation, sitePageHref, writeSiteLocation } from "./shared/site-routing.js";
+const SiteShellContext = React.createContext(null);
+/** Page, locale and navigation of the closest Site shell. Throws outside one. */
+export function useSiteShell() {
+    const ctx = React.useContext(SiteShellContext);
+    if (!ctx)
+        throw new Error("useSiteShell must be used inside <SiteShell>.");
+    return ctx;
+}
+/**
+ * The frame of a demo or single-route website: EN/TR switch, inner-page switching and the
+ * site's own look (accent from one colour, font, material, density), scoped to its root.
+ *
+ * Every language and page is rendered on the server as plain blocks; the shell shows one of
+ * each and swaps on links like `?page=pricing`, `?page=home#faq` or `?lang=tr` inside it —
+ * so server-rendered Navbar and Footer links work as they are. On a page change it scrolls to
+ * the top of the site, moves focus to the page's `h1` and marks matching links
+ * `aria-current="page"`. Back/forward follow the URL. Overlays opened inside keep its theme.
+ *
+ * ```tsx
+ * <SiteShell accent="#B4532A" font="editorial" material="solid" pages={["home", "shop"]}>
+ *   <Navbar items={[{ label: "Shop", href: "?page=shop" }]} … />
+ *   <SiteShellPage id="home"><Hero … /></SiteShellPage>
+ *   <SiteShellPage id="shop"><PageIntro title="Shop" … /></SiteShellPage>
+ * </SiteShell>
+ * ```
+ */
+export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDark, font, material, density, theme, dir, locales = ["en", "tr"], locale: localeProp, defaultLocale, onLocaleChange, pages = ["home"], page: pageProp, defaultPage, onPageChange, routing = "search", pageParam = "page", localeParam = "lang", className, onClick, children, ...props }, ref) {
+    const homeLocale = defaultLocale ?? locales[0] ?? "en";
+    const homePage = defaultPage ?? pages[0] ?? "home";
+    const [locale, setLocale] = useControllableState({ value: localeProp, defaultValue: homeLocale, onChange: onLocaleChange, name: "SiteShell" });
+    const [page, setPage] = useControllableState({ value: pageProp, defaultValue: homePage, onChange: onPageChange, name: "SiteShell" });
+    const rootRef = React.useRef(null);
+    const setRoot = React.useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    /** What to do after the next render: focus the h1, scroll to the top or to an anchor. */
+    const pending = React.useRef(null);
+    const pageKey = pages.join("|");
+    const localeKey = locales.join("|");
+    const params = React.useMemo(() => ({ pageParam, localeParam }), [pageParam, localeParam]);
+    const apply = React.useCallback((to, mode) => {
+        const nextPage = to.page && pages.includes(to.page) ? to.page : page;
+        const nextLocale = to.locale && locales.includes(to.locale) ? to.locale : locale;
+        const pageChanged = nextPage !== page;
+        if (mode !== "none" && routing !== "memory" && typeof window !== "undefined") {
+            const url = writeSiteLocation(window.location, { page: nextPage, locale: nextLocale, anchor: to.anchor }, { page: homePage, locale: homeLocale }, routing, params);
+            if (mode === "push")
+                window.history.pushState(null, "", url);
+            else
+                window.history.replaceState(null, "", url);
+        }
+        if (pageChanged)
+            pending.current = { focus: !to.anchor, scroll: true, anchor: to.anchor };
+        if (nextLocale !== locale)
+            setLocale(nextLocale);
+        if (pageChanged)
+            setPage(nextPage);
+        else if (to.anchor)
+            scrollToAnchor(rootRef.current, to.anchor, false);
+        // The Navbar's mobile menu is a native popover: close it after any switch.
+        rootRef.current?.querySelectorAll("[popover]").forEach((p) => {
+            try {
+                p.hidePopover();
+            }
+            catch {
+                /* not open */
+            }
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [page, locale, pageKey, localeKey, routing, homePage, homeLocale, params, setLocale, setPage]);
+    // URL → state on mount and on back/forward.
+    React.useEffect(() => {
+        if (routing === "memory")
+            return;
+        const sync = (initial) => {
+            const loc = readSiteLocation(window.location.search, window.location.hash, routing, params);
+            const nextPage = loc.page && pages.includes(loc.page) ? loc.page : homePage;
+            const nextLocale = loc.locale && locales.includes(loc.locale) ? loc.locale : homeLocale;
+            const anchor = routing === "search" && window.location.hash.length > 1 ? decodeURIComponent(window.location.hash.slice(1)) : undefined;
+            setLocale(nextLocale);
+            setPage((prev) => {
+                if (prev !== nextPage)
+                    pending.current = { focus: !initial && !anchor, scroll: !initial, anchor: initial ? anchor : undefined };
+                return nextPage;
+            });
+        };
+        // A deep link (`?page=order`) is server-rendered as home and switched here. As a transition,
+        // React finishes hydrating the home tree (and any Suspense boundary still dehydrated) before
+        // swapping pages, instead of re-rendering mid-hydration — which shifted useId values.
+        React.startTransition(() => sync(true));
+        const onPop = () => sync(false);
+        window.addEventListener("popstate", onPop);
+        if (routing === "hash")
+            window.addEventListener("hashchange", onPop);
+        return () => {
+            window.removeEventListener("popstate", onPop);
+            window.removeEventListener("hashchange", onPop);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [routing, pageKey, localeKey, homePage, homeLocale, params]);
+    // After a page change: scroll, focus the h1, and mark the current links.
+    React.useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const todo = pending.current;
+        pending.current = null;
+        if (todo?.anchor)
+            scrollToAnchor(root, todo.anchor, true);
+        else if (todo?.scroll) {
+            const top = root.getBoundingClientRect().top + window.scrollY;
+            if (window.scrollY > top)
+                window.scrollTo({ top: Math.max(0, top), behavior: "instant" });
+        }
+        if (todo?.focus) {
+            const h1 = root.querySelector(`[data-site-page="${cssString(page)}"] h1`) ?? root.querySelector("h1");
+            if (h1) {
+                if (!h1.hasAttribute("tabindex"))
+                    h1.setAttribute("tabindex", "-1");
+                h1.focus({ preventScroll: true });
+            }
+        }
+        root.querySelectorAll("a[href]").forEach((a) => {
+            const loc = parseSiteHref(a.getAttribute("href"), params);
+            if (!loc?.page || loc.anchor)
+                return;
+            if (loc.page === page)
+                a.setAttribute("aria-current", "page");
+            else if (a.getAttribute("aria-current") === "page")
+                a.removeAttribute("aria-current");
+        });
+    }, [page, locale, params]);
+    const handleClick = (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+            return;
+        const a = e.target?.closest?.("a[href]");
+        if (!a || (a.target && a.target !== "_self") || a.hasAttribute("download"))
+            return;
+        const loc = parseSiteHref(a.getAttribute("href"), params);
+        if (!loc)
+            return;
+        if (loc.page && !pages.includes(loc.page))
+            return;
+        if (loc.locale && !locales.includes(loc.locale))
+            return;
+        e.preventDefault();
+        apply(loc, "push");
+    };
+    const ctx = React.useMemo(() => ({
+        page,
+        locale,
+        pages,
+        locales,
+        navigate: (to) => apply(to, "push"),
+        hrefFor: (p, anchor) => sitePageHref(p, anchor, { routing, pageParam }),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [page, locale, pageKey, localeKey, apply, routing, pageParam]);
+    // A colour → scoped variables. A name (built-in preset or your own, like "brand") goes
+    // straight to data-accent.
+    const custom = accent && !isBuiltInAccent(accent) && looksLikeColour(accent) ? accent : undefined;
+    const accentStyle = React.useMemo(() => {
+        if (!custom)
+            return null;
+        try {
+            const key = siteAccentKey(`${custom}${accentDark ? `-${accentDark}` : ""}`);
+            return { key, css: siteAccentCss(siteAccent(custom, { dark: accentDark }), key) };
+        }
+        catch (err) {
+            if (process.env.NODE_ENV !== "production")
+                console.warn(`[vamos-ui] SiteShell: ${err.message}`);
+            return null;
+        }
+    }, [custom, accentDark]);
+    return (_jsx(SiteShellContext.Provider, { value: ctx, children: _jsxs(ThemeScope, { ref: setRoot, theme: theme, material: material, density: density, font: font, dir: dir, accent: accentStyle ? "site" : custom ? undefined : accent, "data-site-accent": accentStyle?.key, "data-site-shell": "", "data-page": page, lang: locale, className: cn("vb-scope font-sans text-fg", className), onClick: handleClick, ...props, children: [accentStyle ? _jsx("style", { children: accentStyle.css }) : null, children] }) }));
+});
+const looksLikeColour = (v) => v.trim().startsWith("#") || v.includes("(");
+const cssString = (s) => s.replace(/["\\]/g, "\\$&");
+function scrollToAnchor(root, anchor, instant) {
+    const el = root?.ownerDocument.getElementById(anchor);
+    if (!el)
+        return;
+    el.scrollIntoView?.({ block: "start", behavior: instant ? "instant" : undefined });
+}
+/** One inner page: rendered only while it is the shell's current page. */
+export function SiteShellPage({ id, title, children }) {
+    const { page } = useSiteShell();
+    const active = page === id;
+    const first = React.useRef(true);
+    React.useEffect(() => {
+        if (active && title && !first.current)
+            document.title = title;
+        first.current = false;
+    }, [active, title]);
+    if (!active)
+        return null;
+    return (_jsx("div", { "data-site-page": id, className: "contents", children: children }));
+}
+/** One language version: rendered only while it is the shell's current locale (with `lang`). */
+export function SiteShellLocale({ code, children }) {
+    const { locale } = useSiteShell();
+    if (locale !== code)
+        return null;
+    return (_jsx("div", { lang: code, className: "contents", children: children }));
+}
+/**
+ * A link to an inner page for client code. Server components can use a plain
+ * `href={sitePageHref("pricing")}` instead; the shell handles both.
+ */
+export const SiteShellLink = React.forwardRef(function SiteShellLink({ page, anchor, ...props }, ref) {
+    const { hrefFor, page: current } = useSiteShell();
+    return _jsx("a", { ref: ref, href: hrefFor(page, anchor), "aria-current": !anchor && current === page ? "page" : undefined, ...props });
+});