@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/blocks/site/_kit-1.d.ts

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { type BlockLabels } from "../labels.js";
+import type { BlockAdapters, ImageData } from "../types.js";
+import type { CtaStyle } from "../schema/types.js";
+export declare const site1Labels: {
+    announcement: string;
+    notice: string;
+    dismiss: string;
+    mainNavigation: string;
+    openMenu: string;
+    closeMenu: string;
+    menuDialog: string;
+    languages: string;
+    callUs: string;
+    phoneLabel: string;
+    breadcrumb: string;
+    playVideo: string;
+    pauseVideo: string;
+    resumeVideo: string;
+    video: string;
+    openCalendar: string;
+    loadsCalendar: string;
+    faqMore: string;
+    stepLabel: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    subscribe: string;
+    subscribed: string;
+    subscribeError: string;
+    date: string;
+    time: string;
+    guests: string;
+    service: string;
+    guestsCount: string;
+    askAvailability: string;
+    opensWhatsApp: string;
+    closedOn: string;
+    bookingMessage: string;
+    bookingMessageService: string;
+    bookingFallback: string;
+    percent: string;
+    logos: string;
+    source: string;
+};
+export type Site1Labels = typeof site1Labels;
+export declare const site1LabelsTr: Site1Labels;
+export type SiteBlockLabels = Partial<BlockLabels & Site1Labels>;
+/** Label lookup for registry-1 blocks: `labels` prop → English. */
+export declare function siteText(labels: SiteBlockLabels | undefined, locale?: string): (key: keyof (BlockLabels & Site1Labels), vars?: Record<string, unknown>) => string;
+/** The raw template of a label (for islands that format it later with their own values). */
+export declare function siteTemplate(labels: SiteBlockLabels | undefined, key: keyof Site1Labels): string;
+/** A call to action: `{ link: { href, label }, style }` — the `f.cta()` shape. */
+export interface SiteCta {
+    link: {
+        href: string;
+        label: React.ReactNode;
+        newTab?: boolean;
+        kind?: string;
+    };
+    style?: CtaStyle;
+}
+/** A short label/value fact ("Founded" · "2014"). */
+export interface SiteMeta {
+    label: React.ReactNode;
+    value: React.ReactNode;
+}
+/** An image with intrinsic size; `alt` required unless decorative. */
+export type SiteImage = ImageData;
+/** Stable ids for a block: `base` (anchor-safe) and the heading id. Server-safe. */
+export declare function useBlockIds(id: string | undefined, prefix: string): {
+    base: string;
+    headingId: string;
+};
+/** `data-field` attribute for edit mode. */
+export declare const field: (editMode: boolean | undefined, path: string) => {
+    "data-field": string;
+} | undefined;
+export interface CtaListProps {
+    actions?: readonly SiteCta[];
+    components?: BlockAdapters;
+    labels?: SiteBlockLabels;
+    locale?: string;
+    size?: "md" | "lg" | "xl";
+    /** Override every action's style (e.g. "link" in a split navbar). */
+    forceStyle?: CtaStyle;
+    /** Only the first n actions. */
+    max?: number;
+    editMode?: boolean;
+    className?: string;
+    /** Add an arrow after `link`-style actions. Default true. */
+    arrow?: boolean;
+}
+/** Renders a block's actions; enforces "one primary" by demoting later primaries to secondary. */
+export declare function CtaList({ actions, components, labels, locale, size, forceStyle, max, editMode, className, arrow }: CtaListProps): React.JSX.Element | null;
+/** Logical "→" that mirrors in RTL. Decorative. */
+export declare function ArrowEnd({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/** Two-digit mono index ("01"). */
+export declare const indexLabel: (i: number) => string;

package/dist/blocks/site/_kit-1.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Shared parts for the site blocks of registry-1 (navbar, hero, feature grid, …).
+// Server-safe: no hooks except useId, no context, no zod.
+import * as React from "react";
+import { ArrowRight } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { formatMessage } from "../../lib/message-format.js";
+import { BlockLink } from "../block-link.js";
+import { blockLabels } from "../labels.js";
+/* ------------------------------------------------------------------ */
+/* Built-in strings (D2b). English defaults; `site1LabelsTr` for tr.   */
+/* ------------------------------------------------------------------ */
+export const site1Labels = {
+    announcement: "Announcement",
+    notice: "Notice",
+    dismiss: "Dismiss announcement",
+    mainNavigation: "Main",
+    openMenu: "Menu",
+    closeMenu: "Close menu",
+    menuDialog: "Site menu",
+    languages: "Language",
+    callUs: "Call {phone}",
+    phoneLabel: "Phone",
+    breadcrumb: "Breadcrumb",
+    playVideo: "Play video: {title}",
+    pauseVideo: "Pause background video",
+    resumeVideo: "Play background video",
+    video: "Video",
+    openCalendar: "Open calendar",
+    loadsCalendar: "Loads the booking calendar from {provider}",
+    faqMore: "Can’t find your question?",
+    stepLabel: "Step {n}",
+    emailLabel: "Email address",
+    emailPlaceholder: "you@company.com",
+    subscribe: "Subscribe",
+    subscribed: "Thanks — check your inbox to confirm.",
+    subscribeError: "That didn’t go through. Try again in a moment.",
+    date: "Date",
+    time: "Time",
+    guests: "Guests",
+    service: "Service",
+    guestsCount: "{count, plural, one {# guest} other {# guests}}",
+    askAvailability: "Ask for availability",
+    opensWhatsApp: "(opens WhatsApp)",
+    closedOn: "We’re closed on {day}. Pick another date.",
+    bookingMessage: "Hi, I’d like to book for {guests} on {date} at {time}.",
+    bookingMessageService: "Hi, I’d like to book {service} on {date} at {time}.",
+    bookingFallback: "Hi, I’d like to make a booking.",
+    percent: "percent",
+    logos: "Clients",
+    source: "Source: {source}",
+};
+export const site1LabelsTr = {
+    announcement: "Duyuru",
+    notice: "Duyuru",
+    dismiss: "Duyuruyu kapat",
+    mainNavigation: "Ana menü",
+    openMenu: "Menü",
+    closeMenu: "Menüyü kapat",
+    menuDialog: "Site menüsü",
+    languages: "Dil",
+    callUs: "Ara: {phone}",
+    phoneLabel: "Telefon",
+    breadcrumb: "Sayfa yolu",
+    playVideo: "Videoyu oynat: {title}",
+    pauseVideo: "Arka plan videosunu duraklat",
+    resumeVideo: "Arka plan videosunu oynat",
+    video: "Video",
+    openCalendar: "Takvimi aç",
+    loadsCalendar: "Rezervasyon takvimi {provider} üzerinden yüklenir",
+    faqMore: "Sorunuzu bulamadınız mı?",
+    stepLabel: "Adım {n}",
+    emailLabel: "E-posta adresi",
+    emailPlaceholder: "siz@sirket.com",
+    subscribe: "Abone ol",
+    subscribed: "Teşekkürler — onay için gelen kutunuza bakın.",
+    subscribeError: "Gönderilemedi. Birazdan tekrar deneyin.",
+    date: "Tarih",
+    time: "Saat",
+    guests: "Kişi",
+    service: "Hizmet",
+    guestsCount: "{count} kişi",
+    askAvailability: "Uygunluk sor",
+    opensWhatsApp: "(WhatsApp’ı açar)",
+    closedOn: "{day} günleri kapalıyız. Başka bir tarih seçin.",
+    bookingMessage: "Merhaba, {date} {time} için {guests} rezervasyon yapmak istiyorum.",
+    bookingMessageService: "Merhaba, {date} {time} için {service} randevusu almak istiyorum.",
+    bookingFallback: "Merhaba, rezervasyon yapmak istiyorum.",
+    percent: "yüzde",
+    logos: "Müşteriler",
+    source: "Kaynak: {source}",
+};
+/** Label lookup for registry-1 blocks: `labels` prop → English. */
+export function siteText(labels, locale = "en-US") {
+    const merged = { ...blockLabels, ...site1Labels };
+    if (labels)
+        for (const [k, v] of Object.entries(labels))
+            if (typeof v === "string")
+                merged[k] = v;
+    return (key, vars) => formatMessage(merged[key] ?? String(key), vars, locale);
+}
+/** The raw template of a label (for islands that format it later with their own values). */
+export function siteTemplate(labels, key) {
+    const v = labels?.[key];
+    return typeof v === "string" ? v : site1Labels[key];
+}
+/** Stable ids for a block: `base` (anchor-safe) and the heading id. Server-safe. */
+export function useBlockIds(id, prefix) {
+    const auto = React.useId();
+    const base = id ?? `${prefix}-${auto.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    return { base, headingId: `${base}-title` };
+}
+/** `data-field` attribute for edit mode. */
+export const field = (editMode, path) => (editMode ? { "data-field": `props.${path}` } : undefined);
+/** Renders a block's actions; enforces "one primary" by demoting later primaries to secondary. */
+export function CtaList({ actions, components, labels, locale, size = "lg", forceStyle, max = 2, editMode, className, arrow = true }) {
+    if (!actions?.length)
+        return null;
+    let primarySeen = false;
+    return (_jsx("div", { "data-dock-avoid": "items", className: cn("flex flex-wrap items-center gap-x-6 gap-y-3", className), children: actions.slice(0, max).map((a, i) => {
+            let style = forceStyle ?? a.style ?? "secondary";
+            if (style === "primary") {
+                if (primarySeen)
+                    style = "secondary";
+                primarySeen = true;
+            }
+            return (_jsxs(BlockLink, { href: a.link.href, newTab: a.link.newTab, appearance: style, size: size, components: components, labels: labels, locale: locale, editMode: editMode, field: `props.actions.${i}`, "data-track": a.link.kind, children: [a.link.label, style === "link" && arrow ? _jsx(ArrowEnd, {}) : null] }, `${a.link.href}-${i}`));
+        }) }));
+}
+/** Logical "→" that mirrors in RTL. Decorative. */
+export function ArrowEnd({ className }) {
+    return _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.5, className: cn("vb-arrow size-[1em] shrink-0 transition-transform duration-200", className) });
+}
+/** Two-digit mono index ("01"). */
+export const indexLabel = (i) => String(i + 1).padStart(2, "0");

package/dist/blocks/site/_site-icon-1.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+/** A lucide icon from its kebab-case name, or the node itself. 20px, stroke 1.5, never boxed (D6-3). */
+export declare function SiteIcon({ icon, className }: {
+    icon?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element | null;

package/dist/blocks/site/_site-icon-1.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Lucide from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const pascal = (s) => s.replace(/(^|-)([a-z0-9])/g, (_, __, c) => c.toUpperCase());
+/** A lucide icon from its kebab-case name, or the node itself. 20px, stroke 1.5, never boxed (D6-3). */
+export function SiteIcon({ icon, className }) {
+    if (!icon)
+        return null;
+    if (typeof icon !== "string")
+        return _jsx("span", { "aria-hidden": true, className: cn("inline-flex size-5 shrink-0 text-fg-muted [&_svg]:size-5", className), children: icon });
+    const Comp = Lucide[pascal(icon)] ?? Lucide[`${pascal(icon)}Icon`];
+    if (!Comp)
+        return null;
+    return _jsx(Comp, { "aria-hidden": true, strokeWidth: 1.5, className: cn("size-5 shrink-0 text-fg-muted", className) });
+}

package/dist/blocks/site/announcement-bar.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type SiteBlockLabels } from "./_kit-1.js";
+export type AnnouncementVariant = "inline" | "centered";
+export type AnnouncementTone = "neutral" | "accent" | "warning";
+export interface AnnouncementBarProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /** inline: text at the start, link after it, dismiss at the end. centered: a mono "Notice" label, text + link centred. */
+    variant?: AnnouncementVariant;
+    /** One line, ≤ 120 characters. */
+    text: React.ReactNode;
+    link?: {
+        href: string;
+        label: React.ReactNode;
+        newTab?: boolean;
+    };
+    /** neutral = ink strip, accent = accent strip, warning = 14% warning tint. Always solid. Default `"neutral"`. */
+    tone?: AnnouncementTone;
+    /** Show a dismiss button (tiny client island + cookie). */
+    dismissible?: boolean;
+    /** The app read the cookie server-side and the visitor dismissed it: render nothing. */
+    dismissed?: boolean;
+    /** Cookie name. Default `vb_ann_<hash of the text>` — new copy shows again. */
+    storageKey?: string;
+    /** ISO datetime: hidden before. */
+    from?: string;
+    /** ISO datetime (exclusive): hidden from. */
+    until?: string;
+    /** "Now" for the schedule check (tests, previews). Default the render time. */
+    now?: Date | string;
+    /** Small label before the text in `centered`. Default "Notice". */
+    label?: React.ReactNode;
+    labels?: SiteBlockLabels;
+}
+/**
+ * A one-line, time-boxed notice at the very top of a site ("Closed 1–3 April for the holiday").
+ * Server component; the dismiss button is a ~0.5 KB island.
+ *
+ * ```tsx
+ * <AnnouncementBar text="Closed 1–3 April for Eid — open again Thursday from noon." link={{ href: "/hours", label: "Holiday hours" }} />
+ * ```
+ */
+export declare function AnnouncementBar({ variant, text, link, tone, dismissible, dismissed, storageKey, from, until, now, label, id, anchor, className, labels, locale, components, editMode, }: AnnouncementBarProps): React.JSX.Element | null;

package/dist/blocks/site/announcement-bar.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { BlockLink } from "../block-link.js";
+import { AnnouncementDismiss } from "./announcement-dismiss.js";
+import { ArrowEnd, field, siteText } from "./_kit-1.js";
+function hash(s) {
+    let h = 5381;
+    for (let i = 0; i < s.length; i++)
+        h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+    return (h >>> 0).toString(36);
+}
+const textOf = (n) => (typeof n === "string" || typeof n === "number" ? String(n) : "");
+const toneClass = {
+    neutral: "bg-fg text-scene",
+    accent: "bg-accent text-accent-fg",
+    warning: "vb-announcement-warning text-fg",
+};
+/**
+ * A one-line, time-boxed notice at the very top of a site ("Closed 1–3 April for the holiday").
+ * Server component; the dismiss button is a ~0.5 KB island.
+ *
+ * ```tsx
+ * <AnnouncementBar text="Closed 1–3 April for Eid — open again Thursday from noon." link={{ href: "/hours", label: "Holiday hours" }} />
+ * ```
+ */
+export function AnnouncementBar({ variant = "inline", text, link, tone = "neutral", dismissible, dismissed, storageKey, from, until, now, label, id, anchor, className, labels, locale, components, editMode, }) {
+    const t = siteText(labels, locale);
+    if (dismissed && !editMode)
+        return null;
+    const at = now ? new Date(now).getTime() : Date.now();
+    const outside = (from && at < Date.parse(from)) || (until && at >= Date.parse(until));
+    if (outside && !editMode)
+        return null;
+    const cookie = storageKey ?? `vb_ann_${hash(textOf(text) + textOf(link?.label))}`;
+    const centered = variant === "centered";
+    const linkEl = link ? (_jsxs(BlockLink, { href: link.href, newTab: link.newTab, components: components, labels: labels, locale: locale, editMode: editMode, field: "props.link", className: "group/ann inline-flex shrink-0 items-center gap-1.5 font-medium underline decoration-current/40 underline-offset-[0.28em] transition-[text-decoration-color] hover:decoration-current focus-ring rounded-[2px]", children: [link.label, _jsx(ArrowEnd, { className: "group-hover/ann:translate-x-0.5 rtl:group-hover/ann:-translate-x-0.5" })] })) : null;
+    return (_jsx("div", { role: "region", "aria-label": t("announcement"), id: anchor, "data-announcement": "", "data-variant": variant, "data-tone": tone, "data-block-id": editMode ? id : undefined, "data-hidden": editMode && outside ? "" : undefined, className: cn("vb-announcement relative text-small", toneClass[tone], className), children: _jsxs("div", { className: cn("vb-container flex min-h-9 items-center gap-3 py-1.5", centered && "justify-center text-center"), children: [_jsxs("p", { className: cn("flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-0.5", centered ? "justify-center" : "flex-1"), children: [centered ? (_jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] after:ms-3 after:inline-block after:h-[0.7em] after:w-px after:bg-current after:align-[-0.05em] after:opacity-40 after:content-['']", ...field(editMode, "label"), children: label ?? t("notice") })) : null, _jsx("span", { className: "text-pretty", ...field(editMode, "text"), children: text }), linkEl] }), dismissible ? (_jsx(AnnouncementDismiss, { cookie: cookie, label: t("dismiss"), className: centered ? "absolute end-[max(var(--gutter),0.5rem)] top-1/2 -translate-y-1/2" : undefined })) : null] }) }));
+}

package/dist/blocks/site/announcement-dismiss.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface AnnouncementDismissProps {
+    /** Cookie name that remembers the dismissal (`vb_ann_<hash>`). */
+    cookie: string;
+    /** Days the cookie lives. Default 30. */
+    days?: number;
+    /** Accessible name ("Dismiss announcement"). */
+    label: string;
+    /** Element to focus after dismissing. Default `"content"`. */
+    focusTarget?: string;
+    className?: string;
+}
+/**
+ * Dismiss island of the Announcement bar (~0.5 KB). Hides the closest
+ * `[data-announcement]`, writes a cookie the server can read, and moves focus to `#content`.
+ * On statically cached pages it also hides an already-dismissed bar on mount.
+ */
+export declare function AnnouncementDismiss({ cookie, days, label, focusTarget, className }: AnnouncementDismissProps): React.JSX.Element;

package/dist/blocks/site/announcement-dismiss.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const readCookie = (name) => typeof document !== "undefined" && document.cookie.split("; ").some((c) => c.startsWith(`${name}=`));
+/**
+ * Dismiss island of the Announcement bar (~0.5 KB). Hides the closest
+ * `[data-announcement]`, writes a cookie the server can read, and moves focus to `#content`.
+ * On statically cached pages it also hides an already-dismissed bar on mount.
+ */
+export function AnnouncementDismiss({ cookie, days = 30, label, focusTarget = "content", className }) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (readCookie(cookie))
+            ref.current?.closest("[data-announcement]")?.setAttribute("hidden", "");
+    }, [cookie]);
+    return (_jsx("button", { ref: ref, type: "button", "aria-label": label, className: cn("-me-2 inline-flex size-8 shrink-0 items-center justify-center rounded-ui-sm text-current opacity-70 transition-opacity hover:opacity-100 focus-ring", className), onClick: () => {
+            document.cookie = `${cookie}=1; max-age=${days * 86400}; path=/; samesite=lax`;
+            ref.current?.closest("[data-announcement]")?.setAttribute("hidden", "");
+            const target = document.getElementById(focusTarget);
+            if (target) {
+                if (!target.hasAttribute("tabindex"))
+                    target.setAttribute("tabindex", "-1");
+                target.focus();
+            }
+        }, children: _jsx(X, { "aria-hidden": true, strokeWidth: 1.5, className: "size-4" }) }));
+}

package/dist/blocks/site/article-layout.d.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { RichDoc } from "../schema/rich-doc.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type SiteImage2, type SiteLink2 } from "./shared/kit-2.js";
+import { type PostSummary } from "./blog-list.js";
+export type ArticleVariant = "classic" | "wide-cover" | "minimal";
+export type ShareTarget = "copy" | "whatsapp" | "x" | "linkedin" | "email";
+export interface ArticleAuthor {
+    name: string;
+    role?: string;
+    bio?: React.ReactNode;
+    avatar?: SiteImage2;
+    href?: string;
+}
+export interface ArticlePost {
+    title: string;
+    /** Standfirst under the title. */
+    dek?: React.ReactNode;
+    body: RichDoc;
+    cover?: SiteImage2;
+    coverCaption?: React.ReactNode;
+    author?: ArticleAuthor;
+    /** ISO datetime or `YYYY-MM-DD`. */
+    publishedAt: string;
+    updatedAt?: string;
+    category?: SiteLink2;
+    tags?: SiteLink2[];
+    /** Breadcrumb trail above the title (Home › Journal). The post itself is appended. */
+    breadcrumb?: SiteLink2[];
+    /** Default: computed from the body (220 wpm). */
+    readingMinutes?: number;
+}
+export interface ArticleLayoutProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * classic: 42rem text column with a sticky mono table of contents at the end; cover wider than
+     * the text. wide-cover: full-width 21:9 cover, title below, TOC as a row of links.
+     * minimal: no cover, mono date above a large title — notes and announcements.
+     */
+    variant?: ArticleVariant;
+    post: ArticlePost;
+    /** Table of contents from the body's h2s (hidden under 3). Default true. */
+    toc?: boolean;
+    /** Share targets — plain URLs, no SDKs. Default copy · whatsapp · linkedin · email. */
+    share?: ShareTarget[];
+    /** Absolute URL used for sharing. Default: the page URL (copy) / omitted. */
+    url?: string;
+    related?: PostSummary[];
+    /** Any block after the article (newsletter, booking CTA). */
+    cta?: React.ReactNode;
+    /** Draft preview: a "Preview" strip on top. Add `noindex` in the app's metadata. */
+    draft?: boolean;
+    labels?: Site2BlockLabels;
+}
+/**
+ * The single-post template: header (breadcrumb, category, title, dek, byline, dates, reading
+ * time), cover, table of contents, body (`RichText`), share links, author box and related posts.
+ * Server component; only "Copy link" is a tiny island.
+ *
+ * ```tsx
+ * <ArticleLayout post={post} related={related} share={["copy", "whatsapp", "linkedin"]} />
+ * ```
+ */
+export declare function ArticleLayout({ variant, post, toc: showToc, share, url, related, cta, draft, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: ArticleLayoutProps): React.JSX.Element;
+export declare function shareUrl(target: Exclude<ShareTarget, "copy">, url: string, title: string): string;

package/dist/blocks/site/article-layout.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { slugify } from "../../lib/text.js";
+import { readingMinutes } from "../../format/core.js";
+import { Section, Container } from "../section.js";
+import { BlockHeading } from "../block-heading.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { RichText } from "../rich-text.js";
+import { inlineToText, richToText, countWords } from "../schema/rich-doc.js";
+import { labelTemplates, site2Text } from "./shared/labels-2.js";
+import { formatDate2, isoDay, useBlockIds2 } from "./shared/kit-2.js";
+import { BrandIcon } from "./shared/brand-icons.js";
+import { CopyLinkButton } from "./shared/copy-link.js";
+import { shareLabelKeys } from "./shared/island-keys.js";
+import { BlogList } from "./blog-list.js";
+/** Gives every h2/h3 a unique, locale-aware anchor and collects the h2s for the TOC. */
+function withAnchors(doc, locale) {
+    const used = new Set();
+    const toc = [];
+    const content = doc.content.map((b) => {
+        if (b.type !== "heading")
+            return b;
+        const text = inlineToText(b.content);
+        let id = b.anchor || slugify(text, { locale }) || "section";
+        let n = 2;
+        while (used.has(id))
+            id = `${b.anchor || slugify(text, { locale })}-${n++}`;
+        used.add(id);
+        if (b.level === 2)
+            toc.push({ id, text });
+        return { ...b, anchor: id };
+    });
+    return { doc: { ...doc, content }, toc };
+}
+/**
+ * The single-post template: header (breadcrumb, category, title, dek, byline, dates, reading
+ * time), cover, table of contents, body (`RichText`), share links, author box and related posts.
+ * Server component; only "Copy link" is a tiny island.
+ *
+ * ```tsx
+ * <ArticleLayout post={post} related={related} share={["copy", "whatsapp", "linkedin"]} />
+ * ```
+ */
+export function ArticleLayout({ variant = "classic", post, toc: showToc = true, share = ["copy", "whatsapp", "linkedin", "email"], url, related, cta, draft, id, anchor, theme, headingLevel = 1, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { headingId } = useBlockIds2(id, "article");
+    const { doc, toc } = withAnchors(post.body, locale);
+    const tocVisible = showToc && toc.length >= 3;
+    const minutes = post.readingMinutes ?? readingMinutes(countWords(richToText(post.body)));
+    const ctx = { t, locale, components, labels };
+    const cover = variant !== "minimal" && post.cover?.src ? post.cover : undefined;
+    const header = (_jsxs("header", { className: cn("flex flex-col gap-6", variant === "wide-cover" && "pt-4"), children: [post.breadcrumb?.length ? _jsx(Breadcrumb, { trail: post.breadcrumb, current: post.title, ctx: ctx }) : null, variant === "minimal" ? (_jsx("p", { className: "font-mono text-eyebrow tabular uppercase tracking-[0.08em] text-fg-muted", children: _jsx("time", { dateTime: isoDay(post.publishedAt), children: formatDate2(isoDay(post.publishedAt), locale) }) })) : post.category ? (_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em]", children: _jsx(BlockLink, { href: post.category.href, components: components, labels: labels, locale: locale, className: "text-accent-ink hover:underline underline-offset-[0.25em] focus-ring rounded-[2px]", children: post.category.label }) })) : null, _jsx(BlockHeading, { id: headingId, level: headingLevel, size: variant === "minimal" ? "display-xl" : "display-l", text: post.title, editMode: editMode, field: "props.post.title", labels: labels, locale: locale, className: "max-w-[22ch]" }), post.dek ? _jsx("p", { className: "max-w-[58ch] text-lead text-fg-muted text-pretty", children: post.dek }) : null, _jsx(Byline, { post: post, minutes: minutes, ctx: ctx, showDate: variant !== "minimal" })] }));
+    const tocNav = tocVisible ? (_jsxs("nav", { "aria-label": t("onThisPage"), className: cn("vb-toc", variant === "wide-cover" ? "border-y border-line py-4" : "flex flex-col gap-3"), children: [_jsx("p", { className: cn("font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", variant === "wide-cover" && "sr-only"), children: t("onThisPage") }), _jsx("ol", { className: cn("text-small", variant === "wide-cover" ? "flex flex-wrap gap-x-6 gap-y-2" : "flex flex-col gap-2 border-s border-line"), children: toc.map((e) => (_jsx("li", { children: _jsx("a", { href: `#${e.id}`, className: cn("vb-toc-link block text-fg-muted transition-colors hover:text-fg focus-ring rounded-[2px]", variant !== "wide-cover" && "-ms-px border-s border-transparent ps-4 hover:border-fg"), children: e.text }) }, e.id))) })] })) : null;
+    const body = _jsx(RichText, { doc: doc, size: "lg", components: components, labels: labels, locale: locale, className: "vb-article-body", editMode: editMode, field: "props.post.body" });
+    return (_jsxs(_Fragment, { children: [draft ? (_jsxs("p", { role: "note", className: "vb-draft-strip sticky top-0 z-20 px-4 py-2 text-center text-small text-fg", children: [_jsx("span", { className: "me-2 font-mono text-eyebrow uppercase tracking-[0.08em]", children: t("preview") }), t("previewNotice")] })) : null, _jsxs(Section, { as: "article", theme: theme, anchor: anchor, headingId: headingId, blockId: id, blockType: "article", editMode: editMode, className: cn("vb-article", className), "data-variant": variant, children: [variant === "wide-cover" && cover ? (_jsx("div", { className: "vb-article-cover -mt-[calc(var(--section-y)*var(--vb-rhythm))] mb-12 @4xl:mb-16", children: _jsx(BlockImage, { ...cover, alt: cover.alt ?? "", decorative: !cover.alt, aspect: "21:9", priority: true, sizes: "100vw", components: components, caption: post.coverCaption ? _jsx("span", { className: "vb-container block", children: post.coverCaption }) : undefined }) })) : null, _jsxs(Container, { className: "flex flex-col gap-12 @4xl:gap-16", children: [_jsx("div", { className: cn(variant === "classic" ? "@4xl:grid @4xl:grid-cols-12 @4xl:gap-x-(--gutter)" : "mx-auto w-full max-w-(--prose)", variant === "wide-cover" && "max-w-[58rem]"), children: _jsx("div", { className: cn(variant === "classic" && "@4xl:col-span-9"), children: header }) }), variant === "classic" && cover ? (_jsx(BlockImage, { ...cover, alt: cover.alt ?? "", decorative: !cover.alt, aspect: "3:2", priority: true, sizes: "(min-width: 76rem) 76rem, 100vw", className: "vb-article-cover rounded-ui", components: components, caption: post.coverCaption })) : null, variant === "wide-cover" && tocNav ? _jsx("div", { className: "mx-auto w-full max-w-[58rem]", children: tocNav }) : null, _jsxs("div", { className: cn(variant === "classic" ? "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12" : "mx-auto w-full max-w-(--prose)"), children: [variant === "classic" && tocNav ? (_jsx("aside", { className: "@4xl:col-span-3 @4xl:col-start-10 @4xl:row-start-1", children: _jsx("div", { className: "@4xl:sticky @4xl:top-[calc(var(--topbar-h,0px)+2rem)]", children: tocNav }) })) : null, _jsxs("div", { className: cn("flex min-w-0 flex-col gap-12", variant === "classic" && "@4xl:col-span-8 @4xl:row-start-1 @6xl:col-span-7"), children: [body, _jsx(ArticleFooter, { post: post, share: share, url: url, ctx: ctx })] })] })] })] }), related?.length ? _jsx(BlogList, { variant: "compact", title: t("relatedPosts"), posts: related, postHeadingLevel: 3, theme: { rhythm: "tight" }, components: components, labels: labels, locale: locale }) : null, cta] }));
+}
+function Breadcrumb({ trail, current, ctx }) {
+    return (_jsx("nav", { "aria-label": ctx.t("breadcrumb"), children: _jsxs("ol", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-small text-fg-muted", children: [trail.map((l, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(BlockLink, { href: l.href, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "hover:text-fg underline-offset-[0.25em] hover:underline focus-ring rounded-[2px]", children: l.label }), _jsx("span", { "aria-hidden": true, className: "text-fg-subtle rtl:-scale-x-100", children: "/" })] }, i))), _jsx("li", { children: _jsx("span", { "aria-current": "page", className: "line-clamp-1 text-fg", children: current }) })] }) }));
+}
+function Byline({ post, minutes, ctx, showDate }) {
+    const updated = post.updatedAt && isoDay(post.updatedAt) !== isoDay(post.publishedAt) ? post.updatedAt : undefined;
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-3 border-t border-line pt-5 text-small text-fg-muted", children: [post.author ? (_jsxs("span", { className: "flex items-center gap-3", children: [post.author.avatar?.src ? _jsx(BlockImage, { ...post.author.avatar, decorative: true, aspect: "1:1", sizes: "36px", className: "size-9 shrink-0 rounded-full", components: ctx.components }) : null, _jsx("span", { className: "font-medium text-fg", children: post.author.name })] })) : null, _jsxs("span", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-eyebrow tabular uppercase tracking-[0.06em]", children: [showDate ? _jsx("time", { dateTime: isoDay(post.publishedAt), children: formatDate2(isoDay(post.publishedAt), ctx.locale) }) : null, updated ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: isoDay(updated), children: ctx.t("updated", { date: formatDate2(isoDay(updated), ctx.locale, "medium") }) })] })) : null, showDate || updated ? _jsx("span", { "aria-hidden": true, children: "\u00B7" }) : null, _jsx("span", { children: ctx.t("minRead", { count: minutes }) })] })] }));
+}
+const SHARE_NETWORK = {
+    whatsapp: { brand: "whatsapp", name: "WhatsApp" },
+    x: { brand: "x", name: "X" },
+    linkedin: { brand: "linkedin", name: "LinkedIn" },
+    email: { brand: "email", name: "Email" },
+};
+export function shareUrl(target, url, title) {
+    const u = encodeURIComponent(url);
+    const tt = encodeURIComponent(title);
+    switch (target) {
+        case "whatsapp":
+            return `https://wa.me/?text=${encodeURIComponent(`${title} ${url}`)}`;
+        case "x":
+            return `https://x.com/intent/post?url=${u}&text=${tt}`;
+        case "linkedin":
+            return `https://www.linkedin.com/sharing/share-offsite/?url=${u}`;
+        case "email":
+            return `mailto:?subject=${tt}&body=${u}`;
+    }
+}
+function ArticleFooter({ post, share, url, ctx }) {
+    const targets = share.filter((s) => s === "copy" || url);
+    return (_jsxs("footer", { className: "flex flex-col gap-10 border-t border-line pt-8", children: [post.tags?.length ? (_jsx("ul", { className: "flex flex-wrap gap-2", "aria-label": ctx.t("tags"), children: post.tags.map((tag, i) => (_jsx("li", { children: _jsx(BlockLink, { href: tag.href, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "inline-flex h-8 items-center rounded-full border border-line px-3 text-small text-fg-muted transition-colors hover:border-fg hover:text-fg focus-ring", children: tag.label }) }, i))) })) : null, targets.length ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-3", children: [_jsx("p", { className: "me-3 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("share") }), targets.map((s) => s === "copy" ? (_jsx(CopyLinkButton, { url: url, labels: labelTemplates(ctx.labels, shareLabelKeys) }, s)) : (_jsxs(BlockLink, { href: shareUrl(s, url, post.title), newTab: s !== "email", components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": s === "email" ? ctx.t("shareByEmail") : ctx.t("shareOn", { network: SHARE_NETWORK[s].name }), className: "vb-share-btn", "data-track": `share:${s}`, children: [_jsx(BrandIcon, { name: SHARE_NETWORK[s].brand, className: "size-4" }), _jsx("span", { "aria-hidden": true, children: SHARE_NETWORK[s].name })] }, s)))] })) : null, post.author?.bio ? (_jsxs("div", { className: "flex gap-5 rounded-ui bg-surface-2 p-6", children: [post.author.avatar?.src ? _jsx(BlockImage, { ...post.author.avatar, decorative: true, aspect: "1:1", sizes: "64px", className: "size-16 shrink-0 rounded-full", components: ctx.components }) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: ctx.t("writtenBy") }), _jsxs("p", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", children: [post.author.href ? (_jsx(BlockLink, { href: post.author.href, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "hover:underline underline-offset-[0.2em] focus-ring rounded-[2px]", children: post.author.name })) : (post.author.name), post.author.role ? _jsx("span", { className: "ms-2 text-small font-normal text-fg-muted", children: post.author.role }) : null] }), _jsx("div", { className: "text-small text-fg-muted text-pretty", children: post.author.bio })] })] })) : null] }));
+}

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

@@ -0,0 +1,79 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type SiteImage2, type SiteLink2 } from "./shared/kit-2.js";
+export type BlogListVariant = "editorial" | "list" | "grid" | "compact";
+/** The contract every CMS maps into. Plain data. */
+export interface PostSummary {
+    href: string;
+    title: string;
+    excerpt?: string;
+    cover?: SiteImage2;
+    category?: {
+        label: string;
+        href?: string;
+    };
+    /** ISO datetime or `YYYY-MM-DD`. */
+    publishedAt: string;
+    readingMinutes?: number;
+    author?: {
+        name: string;
+        avatar?: SiteImage2;
+    };
+}
+export interface BlogPagination {
+    page: number;
+    total: number;
+    /** Builds a page URL (server usage). */
+    href?: (page: number) => string;
+    /** JSON-friendly alternative: `"/blog?page={page}"`. Page 1 drops the query when it ends in `?page={page}`. */
+    hrefTemplate?: string;
+}
+export interface BlogListProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * editorial: the first post large beside its cover, the rest as a two-column title list.
+     * list: date · title + excerpt · reading time rows. grid: three columns of 3:2 covers.
+     * compact: titles and dates only — sidebars, footers, "related posts".
+     */
+    variant?: BlogListVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    /** "All posts" link beside the header. */
+    allLink?: SiteLink2;
+    posts: PostSummary[];
+    /** Category filter (links; mark one `active`). */
+    categories?: {
+        label: string;
+        href: string;
+        active?: boolean;
+    }[];
+    pagination?: BlogPagination;
+    /** Default true (compact never shows covers). */
+    showCovers?: boolean;
+    /** Empty state copy and an optional action (newsletter CTA). */
+    empty?: {
+        title?: React.ReactNode;
+        text?: React.ReactNode;
+        action?: React.ReactNode;
+    };
+    /** Post title level. Default: 3 under a section title, else 2. */
+    postHeadingLevel?: 2 | 3 | 4;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Latest posts and category archives. Receives posts as data (`PostSummary`); fetching is the
+ * app's job (or the renderer's `resolvers.posts`). Each post is an `article` with one link on the
+ * title that covers the card. Server component.
+ *
+ * ```tsx
+ * <BlogList variant="editorial" title="From the *studio*" posts={posts} pagination={{ page: 1, total: 4, hrefTemplate: "/blog?page={page}" }} />
+ * ```
+ */
+export declare function BlogList({ variant, eyebrow, title, lead, allLink, posts, categories, pagination, showCovers, empty, postHeadingLevel, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: BlogListProps): React.JSX.Element;
+/** Streaming fallback for `<Suspense fallback={<BlogListSkeleton />}>`. */
+export declare function BlogListSkeleton({ variant, count, className }: {
+    variant?: BlogListVariant;
+    count?: number;
+    className?: string;
+}): React.JSX.Element;