@vertebr/react 0.4.0 → 0.5.0

package/dist/components/emails/EmailsLibraryPanel.js

@@ -0,0 +1,379 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { EmailsNavSelect } from "./EmailsNavSelect";
+import { MultiCheckSelect } from "./MultiCheckSelect";
+const FREEFORM_PRESETS = new Set(["custom", "promo", "custom_discount"]);
+function humanize(value) {
+    return value
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .trim();
+}
+export function systemPresetsFromTemplates(templates) {
+    const seen = new Set();
+    const out = [];
+    for (const template of templates) {
+        const raw = template.input?.preset;
+        if (!raw || typeof raw === "string")
+            continue;
+        if (raw.type !== "enum" || !raw.options?.length)
+            continue;
+        for (const option of raw.options) {
+            if (!option || FREEFORM_PRESETS.has(option) || option.startsWith("library:")) {
+                continue;
+            }
+            if (seen.has(option))
+                continue;
+            seen.add(option);
+            out.push({
+                id: option,
+                label: raw.optionLabels?.[option]?.trim() || humanize(option),
+            });
+        }
+    }
+    return out;
+}
+function emptyEditor(from) {
+    return {
+        id: from?.id ?? `lib_${crypto.randomUUID().replace(/-/g, "").slice(0, 12)}`,
+        label: from?.label ?? "",
+        subject: from?.subject ?? "",
+        body: from?.body ?? "",
+        productIds: from?.productIds ?? [],
+        discountId: from?.discountId,
+        discountCode: from?.discountCode ?? "",
+        discountOffer: from?.discountOffer ?? "",
+        discountExpires: from?.discountExpires ?? "",
+        fromPreset: from?.fromPreset,
+        kind: from?.kind,
+        eyebrow: from?.eyebrow ?? "",
+        headline: from?.headline ?? "",
+        confirmationLabel: from?.confirmationLabel ?? "",
+        shippingNote: from?.shippingNote ?? "",
+        footer: from?.footer ?? "",
+        signOff: from?.signOff ?? "",
+        createdAt: from?.createdAt,
+    };
+}
+function kindFromPreset(presetId) {
+    if (/order_?confirm|receipt|invoice/i.test(presetId))
+        return "order";
+    if (/discount|offer|sale|flash/i.test(presetId))
+        return "discount";
+    if (/promo|drop|restock/i.test(presetId))
+        return "promo";
+    return "account";
+}
+function formatRecipients(to) {
+    return Array.isArray(to) ? to.join(", ") : to;
+}
+function previewInput(editor, saved) {
+    const preset = saved
+        ? `library:${editor.id}`
+        : editor.kind === "discount"
+            ? "custom_discount"
+            : editor.kind === "promo"
+                ? "promo"
+                : "custom";
+    return {
+        preset,
+        kind: editor.kind,
+        subject: editor.subject,
+        body: editor.body,
+        productIds: editor.productIds,
+        discountId: editor.discountId,
+        discountCode: editor.discountCode,
+        discountOffer: editor.discountOffer,
+        discountExpires: editor.discountExpires,
+        eyebrow: editor.eyebrow,
+        headline: editor.headline,
+        confirmationLabel: editor.confirmationLabel,
+        shippingNote: editor.shippingNote,
+        footer: editor.footer,
+        signOff: editor.signOff,
+    };
+}
+function canPreviewDraft(editor) {
+    if (editor.kind === "order")
+        return true;
+    if (!editor.subject.trim() || !editor.body.trim())
+        return false;
+    if (editor.kind === "discount") {
+        return Boolean(editor.discountCode.trim() && editor.discountOffer.trim());
+    }
+    return true;
+}
+export function EmailsLibraryPanel({ templates, library, products, discounts = [], canLibrary, busy, previewResourceId, previewTemplateId, onPreview, onSaveLibrary, onDeleteLibrary, }) {
+    const systemPresets = useMemo(() => systemPresetsFromTemplates(templates), [templates]);
+    const [editor, setEditor] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [section, setSection] = useState("all");
+    const [preview, setPreview] = useState(null);
+    const [previewing, setPreviewing] = useState(false);
+    const savedEditor = Boolean(editor && library.some((item) => item.id === editor.id));
+    const productOptions = useMemo(() => products.map((item) => ({
+        id: item.id,
+        label: item.label,
+        secondary: item.priceLabel,
+        imageUrl: item.imageUrl,
+    })), [products]);
+    const loadPreview = useCallback(async () => {
+        if (!editor || !onPreview || !previewResourceId || !previewTemplateId) {
+            setPreview(null);
+            return;
+        }
+        if (!canPreviewDraft(editor)) {
+            setPreview(null);
+            return;
+        }
+        setPreviewing(true);
+        try {
+            const next = await onPreview({
+                resourceId: previewResourceId,
+                templateId: previewTemplateId,
+                input: previewInput(editor, savedEditor),
+            });
+            setPreview(next);
+        }
+        catch {
+            setPreview(null);
+        }
+        finally {
+            setPreviewing(false);
+        }
+    }, [
+        editor,
+        onPreview,
+        previewResourceId,
+        previewTemplateId,
+        savedEditor,
+    ]);
+    useEffect(() => {
+        const timer = window.setTimeout(() => {
+            void loadPreview();
+        }, 280);
+        return () => window.clearTimeout(timer);
+    }, [loadPreview]);
+    const openDuplicate = (preset) => {
+        setError(null);
+        setEditor(emptyEditor({
+            label: `${preset.label} copy`,
+            fromPreset: preset.id,
+            kind: kindFromPreset(preset.id),
+        }));
+    };
+    const openEdit = (item) => {
+        setError(null);
+        setEditor(emptyEditor({
+            id: item.id,
+            label: item.label,
+            subject: item.subject,
+            body: item.body,
+            productIds: item.productIds ?? [],
+            discountId: item.discountId,
+            discountCode: item.discountCode ?? "",
+            discountOffer: item.discountOffer ?? "",
+            discountExpires: item.discountExpires ?? "",
+            fromPreset: item.fromPreset,
+            kind: item.kind,
+            eyebrow: item.eyebrow ?? "",
+            headline: item.headline ?? "",
+            confirmationLabel: item.confirmationLabel ?? "",
+            shippingNote: item.shippingNote ?? "",
+            footer: item.footer ?? "",
+            signOff: item.signOff ?? "",
+            createdAt: item.createdAt,
+        }));
+    };
+    const openCreate = () => {
+        setError(null);
+        setEditor(emptyEditor({ kind: "promo" }));
+    };
+    const save = async () => {
+        if (!editor || !onSaveLibrary)
+            return;
+        const label = editor.label.trim();
+        const subject = editor.subject.trim();
+        const body = editor.body.trim();
+        if (!label || !subject || !body) {
+            setError("Label, subject, and body are required.");
+            return;
+        }
+        if (editor.kind === "discount" &&
+            (!editor.discountCode.trim() || !editor.discountOffer.trim())) {
+            setError("Discount templates need a code and offer label.");
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            const now = new Date().toISOString();
+            await onSaveLibrary({
+                id: editor.id,
+                label,
+                subject,
+                body,
+                productIds: editor.productIds.length ? editor.productIds : undefined,
+                discountId: editor.kind === "discount" ?
+                    editor.discountId || undefined :
+                    undefined,
+                discountCode: editor.kind === "discount" ?
+                    editor.discountCode.trim() || undefined :
+                    undefined,
+                discountOffer: editor.kind === "discount" ?
+                    editor.discountOffer.trim() || undefined :
+                    undefined,
+                discountExpires: editor.kind === "discount" ?
+                    editor.discountExpires.trim() || undefined :
+                    undefined,
+                fromPreset: editor.fromPreset,
+                kind: editor.kind,
+                eyebrow: editor.kind === "order" ?
+                    editor.eyebrow.trim() || undefined :
+                    undefined,
+                headline: editor.kind === "order" ?
+                    editor.headline.trim() || undefined :
+                    undefined,
+                confirmationLabel: editor.kind === "order" ?
+                    editor.confirmationLabel.trim() || undefined :
+                    undefined,
+                shippingNote: editor.kind === "order" ?
+                    editor.shippingNote.trim() || undefined :
+                    undefined,
+                footer: editor.kind === "order" ?
+                    editor.footer.trim() || undefined :
+                    undefined,
+                signOff: editor.kind === "order" ?
+                    editor.signOff.trim() || undefined :
+                    undefined,
+                createdAt: editor.createdAt ?? now,
+                updatedAt: now,
+            });
+            setEditor(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Save failed");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const remove = async (item) => {
+        if (!onDeleteLibrary)
+            return;
+        if (!window.confirm(`Delete template “${item.label}”?`))
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            await onDeleteLibrary(item.id);
+            if (editor?.id === item.id)
+                setEditor(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Delete failed");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const disabled = busy || saving || !canLibrary || !onSaveLibrary;
+    return (_jsx("div", { className: "vertebr-emails-library", "data-editing": editor ? "true" : undefined, children: editor ? (_jsxs("div", { className: "vertebr-emails-library-editor", children: [_jsxs("header", { children: [_jsx("h3", { children: savedEditor ? "Edit template" : "Save as custom" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: saving, onClick: () => {
+                                setEditor(null);
+                                setPreview(null);
+                            }, children: "Close" })] }), _jsxs("div", { className: "vertebr-emails-layout", children: [_jsxs("div", { className: "vertebr-emails-compose", children: [_jsxs("div", { className: "vertebr-emails-fields", children: [_jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Label" }), _jsx("input", { type: "text", value: editor.label, disabled: saving, onChange: (event) => setEditor((current) => current
+                                                        ? { ...current, label: event.target.value }
+                                                        : current) })] }), _jsx("div", { className: "vertebr-emails-segment", role: "group", "aria-label": "Kind", children: [
+                                                ["account", "Account"],
+                                                ["promo", "Promo"],
+                                                ["discount", "Discount"],
+                                                ["order", "Order"],
+                                            ].map(([id, label]) => (_jsx("button", { type: "button", "data-active": editor.kind === id ? "true" : undefined, disabled: saving || editor.kind === "order", onClick: () => setEditor((current) => current ? { ...current, kind: id } : current), children: label }, id))) }), _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Subject" }), _jsx("input", { type: "text", value: editor.subject, disabled: saving, onChange: (event) => setEditor((current) => current
+                                                        ? { ...current, subject: event.target.value }
+                                                        : current) })] }), _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: editor.kind === "order" ? "Intro" : "Body" }), _jsx("textarea", { rows: editor.kind === "order" ? 4 : 7, value: editor.body, disabled: saving, onChange: (event) => setEditor((current) => current
+                                                        ? { ...current, body: event.target.value }
+                                                        : current) })] }), editor.kind === "order" ? (_jsxs(_Fragment, { children: [_jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Eyebrow" }), _jsx("input", { type: "text", value: editor.eyebrow, disabled: saving, onChange: (event) => setEditor((current) => current
+                                                                ? { ...current, eyebrow: event.target.value }
+                                                                : current) })] }), _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Headline" }), _jsx("input", { type: "text", value: editor.headline, disabled: saving, onChange: (event) => setEditor((current) => current
+                                                                ? { ...current, headline: event.target.value }
+                                                                : current) })] }), _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Confirmation label" }), _jsx("input", { type: "text", value: editor.confirmationLabel, disabled: saving, onChange: (event) => setEditor((current) => current
+                                                                ? {
+                                                                    ...current,
+                                                                    confirmationLabel: event.target.value,
+                                                                }
+                                                                : current) })] }), _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Shipping note" }), _jsx("textarea", { rows: 2, value: editor.shippingNote, disabled: saving, onChange: (event) => setEditor((current) => current
+                                                                ? {
+                                                                    ...current,
+                                                                    shippingNote: event.target.value,
+                                                                }
+                                                                : current) })] }), _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Footer" }), _jsx("textarea", { rows: 2, value: editor.footer, disabled: saving, onChange: (event) => setEditor((current) => current
+                                                                ? { ...current, footer: event.target.value }
+                                                                : current) })] }), _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Sign-off" }), _jsx("input", { type: "text", value: editor.signOff, disabled: saving, onChange: (event) => setEditor((current) => current
+                                                                ? { ...current, signOff: event.target.value }
+                                                                : current) })] }), _jsxs("p", { className: "vertebr-mail-compose-hint", children: ["Tokens: ", "{{confirmationNumber}}", ", ", "{{email}}", ",", " ", "{{total}}"] })] })) : null, editor.kind === "discount" ? (_jsxs(_Fragment, { children: [discounts.length > 0 ? (_jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Discount" }), _jsxs("select", { value: editor.discountId ?? "", disabled: saving, onChange: (event) => {
+                                                                const id = event.target.value;
+                                                                const hit = discounts.find((item) => item.id === id);
+                                                                setEditor((current) => current
+                                                                    ? {
+                                                                        ...current,
+                                                                        discountId: id || undefined,
+                                                                        discountCode: hit?.code ?? current.discountCode,
+                                                                        discountOffer: hit?.offerLabel ??
+                                                                            hit?.label ??
+                                                                            current.discountOffer,
+                                                                        discountExpires: hit?.expiresLabel ??
+                                                                            current.discountExpires,
+                                                                    }
+                                                                    : current);
+                                                            }, children: [_jsx("option", { value: "", children: "Manual code\u2026" }), discounts.map((item) => (_jsxs("option", { value: item.id, children: [item.label, item.code ? ` (${item.code})` : ""] }, item.id)))] })] })) : null, _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Discount code" }), _jsx("input", { type: "text", value: editor.discountCode, disabled: saving, placeholder: "WELCOME20", onChange: (event) => setEditor((current) => current
+                                                                ? {
+                                                                    ...current,
+                                                                    discountCode: event.target.value,
+                                                                }
+                                                                : current) })] }), _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Offer label" }), _jsx("input", { type: "text", value: editor.discountOffer, disabled: saving, placeholder: "20% off", onChange: (event) => setEditor((current) => current
+                                                                ? {
+                                                                    ...current,
+                                                                    discountOffer: event.target.value,
+                                                                }
+                                                                : current) })] }), _jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Expires (optional)" }), _jsx("input", { type: "text", value: editor.discountExpires, disabled: saving, placeholder: "Expires Mar 1", onChange: (event) => setEditor((current) => current
+                                                                ? {
+                                                                    ...current,
+                                                                    discountExpires: event.target.value,
+                                                                }
+                                                                : current) })] })] })) : null, productOptions.length > 0 ? (_jsxs("label", { className: "vertebr-mail-field", children: [_jsx("span", { children: "Products" }), _jsx(MultiCheckSelect, { options: productOptions, value: editor.productIds, disabled: saving, placeholder: "Add products with photos\u2026", emptyLabel: "No products", onChange: (next) => setEditor((current) => current ? { ...current, productIds: next } : current) })] })) : null, editor.fromPreset ? (_jsxs("p", { className: "vertebr-emails-library-meta", children: ["From system preset ", _jsx("code", { children: editor.fromPreset })] })) : null, error ? (_jsx("p", { className: "vertebr-mail-compose-error", children: error })) : null] }), _jsx("div", { className: "vertebr-mail-compose-foot", children: _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: saving || !onSaveLibrary, onClick: () => void save(), children: saving ? "Saving…" : "Save template" }) })] }), _jsx("div", { className: "vertebr-emails-side", children: _jsxs("div", { className: "vertebr-mail-preview", children: [_jsxs("div", { className: "vertebr-mail-preview-meta", children: [_jsxs("p", { children: [_jsx("span", { children: "To" }), _jsx("strong", { children: preview
+                                                            ? formatRecipients(preview.to)
+                                                            : previewing
+                                                                ? "Updating…"
+                                                                : "Sample recipient" })] }), _jsxs("p", { children: [_jsx("span", { children: "Subject" }), _jsx("strong", { children: preview?.subject ??
+                                                            (previewing ? "Updating…" : editor.subject || "—") })] })] }), _jsx("div", { className: "vertebr-mail-preview-stage", children: _jsx("div", { className: "vertebr-mail-preview-frame", children: preview?.html ? (_jsx("iframe", { title: "Email preview", sandbox: "", srcDoc: preview.html })) : preview?.text ? (_jsx("pre", { children: preview.text })) : (_jsx("div", { className: "vertebr-mail-preview-empty", children: previewing
+                                                    ? "Rendering host template…"
+                                                    : !previewResourceId || !previewTemplateId
+                                                        ? "No sample audience to preview against."
+                                                        : editor.kind === "discount" &&
+                                                            (!editor.discountCode.trim() ||
+                                                                !editor.discountOffer.trim())
+                                                            ? "Add a discount code and offer to preview."
+                                                            : "Write a subject and body to preview." })) }) })] }) })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vertebr-emails-subnav", children: [_jsx(EmailsNavSelect, { size: "sm", ariaLabel: "Templates subsection", value: section, onChange: setSection, options: [
+                                {
+                                    id: "all",
+                                    label: "All templates",
+                                    count: systemPresets.length + library.length,
+                                    hint: "Presets and saved",
+                                },
+                                {
+                                    id: "system",
+                                    label: "System presets",
+                                    count: systemPresets.length,
+                                    hint: "Built-in starting points",
+                                },
+                                {
+                                    id: "saved",
+                                    label: "Saved templates",
+                                    count: library.length,
+                                    hint: "Owner-edited copies",
+                                },
+                            ] }), canLibrary && onSaveLibrary && section !== "system" ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: disabled, onClick: openCreate, children: "New" })) : null] }), _jsxs("div", { className: "vertebr-emails-library-cols", "data-section": section, children: [section !== "saved" ? (_jsxs("section", { className: "vertebr-emails-library-section", children: [_jsxs("header", { children: [_jsx("h3", { children: "System presets" }), _jsx("span", { className: "vertebr-count", children: systemPresets.length })] }), systemPresets.length === 0 ? (_jsx("p", { className: "vertebr-emails-campaigns-empty", children: "No system presets exposed on template inputs." })) : (_jsx("ul", { children: systemPresets.map((preset) => (_jsxs("li", { children: [_jsxs("div", { children: [_jsx("strong", { children: preset.label }), _jsx("span", { children: preset.id })] }), canLibrary && onSaveLibrary ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: disabled, onClick: () => openDuplicate(preset), children: "Duplicate" })) : null] }, preset.id))) }))] })) : null, section !== "system" ? (_jsxs("section", { className: "vertebr-emails-library-section", children: [_jsxs("header", { children: [_jsx("h3", { children: "Saved templates" }), _jsx("span", { className: "vertebr-count", children: library.length })] }), !canLibrary ? (_jsx("p", { className: "vertebr-emails-campaigns-empty", children: "Host has not enabled the template library." })) : library.length === 0 ? (_jsx("p", { className: "vertebr-emails-campaigns-empty", children: "No saved templates yet. Duplicate a system preset or create one." })) : (_jsx("ul", { children: library.map((item) => (_jsxs("li", { children: [_jsxs("div", { children: [_jsx("strong", { children: item.label }), _jsxs("span", { children: [item.fromPreset ? `from ${item.fromPreset}` : "custom", item.kind === "discount" ? " · discount" : "", item.kind === "order" ? " · order" : "", item.discountCode ? ` · ${item.discountCode}` : "", item.productIds?.length
+                                                                ? ` · ${item.productIds.length} products`
+                                                                : ""] }), item.subject ? (_jsx("span", { className: "vertebr-emails-campaign-subject", children: item.subject })) : null] }), _jsxs("div", { className: "vertebr-emails-library-actions", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: disabled, onClick: () => openEdit(item), children: "Edit" }), onDeleteLibrary && item.kind !== "order" ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: disabled, onClick: () => void remove(item), children: "Delete" })) : null] })] }, item.id))) }))] })) : null] })] })) }));
+}

package/dist/components/emails/EmailsNavSelect.d.ts

@@ -0,0 +1,18 @@
+export type EmailsNavOption<T extends string> = {
+    id: T;
+    label: string;
+    count?: number;
+    hint?: string;
+};
+export type EmailsNavSelectProps<T extends string> = {
+    value: T;
+    options: EmailsNavOption<T>[];
+    onChange: (next: T) => void;
+    ariaLabel: string;
+    size?: "md" | "sm";
+};
+/**
+ * Compact dropdown used for Emails board sections / subsections.
+ */
+export declare function EmailsNavSelect<T extends string>({ value, options, onChange, ariaLabel, size, }: EmailsNavSelectProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=EmailsNavSelect.d.ts.map

package/dist/components/emails/EmailsNavSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailsNavSelect.d.ts","sourceRoot":"","sources":["../../../src/components/emails/EmailsNavSelect.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI;IAC9C,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,IAAI;IACnD,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,IAAW,GACZ,EAAE,oBAAoB,CAAC,CAAC,CAAC,+BA6FzB"}

package/dist/components/emails/EmailsNavSelect.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+/**
+ * Compact dropdown used for Emails board sections / subsections.
+ */
+export function EmailsNavSelect({ value, options, onChange, ariaLabel, size = "md", }) {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    const listId = useId();
+    const current = options.find((option) => option.id === value) ?? options[0];
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointer = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onPointer);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onPointer);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    return (_jsxs("div", { className: "vertebr-emails-nav", "data-size": size, "data-open": open || undefined, ref: rootRef, children: [_jsxs("button", { type: "button", className: "vertebr-emails-nav-trigger", "aria-label": ariaLabel, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, onClick: () => setOpen((prev) => !prev), children: [_jsxs("span", { className: "vertebr-emails-nav-current", children: [_jsx("span", { className: "vertebr-emails-nav-label", children: current?.label }), current?.count != null ? (_jsx("span", { className: "vertebr-emails-nav-count", children: current.count })) : null] }), _jsx("span", { className: "vertebr-emails-nav-chevron", "aria-hidden": "true", children: "\u25BE" })] }), open ? (_jsx("ul", { id: listId, className: "vertebr-emails-nav-menu", role: "listbox", "aria-label": ariaLabel, children: options.map((option) => {
+                    const active = option.id === value;
+                    return (_jsx("li", { role: "presentation", children: _jsxs("button", { type: "button", role: "option", "aria-selected": active, "data-active": active || undefined, className: "vertebr-emails-nav-option", onClick: () => {
+                                onChange(option.id);
+                                setOpen(false);
+                            }, children: [_jsxs("span", { className: "vertebr-emails-nav-option-main", children: [_jsx("span", { className: "vertebr-emails-nav-label", children: option.label }), option.count != null ? (_jsx("span", { className: "vertebr-emails-nav-count", children: option.count })) : null] }), option.hint ? (_jsx("span", { className: "vertebr-emails-nav-hint", children: option.hint })) : null] }) }, option.id));
+                }) })) : null] }));
+}

package/dist/components/emails/MultiCheckSelect.d.ts

@@ -0,0 +1,18 @@
+export type MultiCheckOption = {
+    id: string;
+    label: string;
+    secondary?: string;
+    imageUrl?: string;
+};
+export type MultiCheckSelectProps = {
+    options: MultiCheckOption[];
+    value: string[];
+    loading?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    emptyLabel?: string;
+    searchPlaceholder?: string;
+    onChange: (ids: string[]) => void;
+};
+export declare function MultiCheckSelect({ options, value, loading, disabled, placeholder, emptyLabel, searchPlaceholder, onChange, }: MultiCheckSelectProps): import("react").JSX.Element;
+//# sourceMappingURL=MultiCheckSelect.d.ts.map

package/dist/components/emails/MultiCheckSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiCheckSelect.d.ts","sourceRoot":"","sources":["../../../src/components/emails/MultiCheckSelect.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnC,CAAC;AAMF,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAuB,EACvB,UAAgC,EAChC,iBAA6B,EAC7B,QAAQ,GACT,EAAE,qBAAqB,+BA4LvB"}

package/dist/components/emails/MultiCheckSelect.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+function normalizeId(value) {
+    return value.trim();
+}
+export function MultiCheckSelect({ options, value, loading, disabled, placeholder = "Select…", emptyLabel = "Nothing available", searchPlaceholder = "Search…", onChange, }) {
+    const listId = useId();
+    const rootRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const selected = useMemo(() => new Set(value.map(normalizeId)), [value]);
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return options;
+        return options.filter((option) => {
+            const hay = `${option.label} ${option.secondary ?? ""} ${option.id}`.toLowerCase();
+            return hay.includes(q);
+        });
+    }, [options, query]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointer = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                setOpen(false);
+        };
+        window.addEventListener("mousedown", onPointer);
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("mousedown", onPointer);
+            window.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    const toggle = (id) => {
+        const key = normalizeId(id);
+        const next = new Set(selected);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        onChange(options
+            .map((option) => normalizeId(option.id))
+            .filter((item) => next.has(item)));
+    };
+    const selectAllFiltered = () => {
+        const next = new Set(selected);
+        for (const option of filtered) {
+            next.add(normalizeId(option.id));
+        }
+        onChange(options
+            .map((option) => normalizeId(option.id))
+            .filter((item) => next.has(item)));
+    };
+    const clearAll = () => onChange([]);
+    const summary = value.length === 0
+        ? loading
+            ? "Loading…"
+            : options.length === 0
+                ? emptyLabel
+                : placeholder
+        : value.length === 1
+            ? (options.find((option) => option.id === value[0])?.label ?? value[0])
+            : `${value.length} selected`;
+    return (_jsxs("div", { className: "vertebr-email-select", ref: rootRef, "data-open": open ? "true" : undefined, children: [_jsxs("button", { type: "button", className: "vertebr-select-trigger vertebr-email-select-trigger", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, disabled: disabled || loading || options.length === 0, onClick: () => setOpen((current) => !current), children: [_jsx("span", { className: "vertebr-select-value", children: summary }), _jsx("span", { className: "vertebr-select-icon", "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", children: _jsx("path", { d: "M2.5 4.5 6 8l3.5-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), open ? (_jsxs("div", { className: "vertebr-email-select-panel", id: listId, role: "listbox", children: [options.length > 6 ? (_jsxs("div", { className: "vertebr-email-select-toolbar", children: [_jsx("input", { type: "search", value: query, placeholder: searchPlaceholder, "aria-label": "Search", onChange: (event) => setQuery(event.target.value) }), _jsxs("div", { className: "vertebr-email-select-actions", children: [_jsx("button", { type: "button", onClick: selectAllFiltered, children: "All" }), _jsx("button", { type: "button", onClick: clearAll, disabled: value.length === 0, children: "Clear" })] })] })) : (_jsx("div", { className: "vertebr-email-select-toolbar vertebr-email-select-toolbar-compact", children: _jsxs("div", { className: "vertebr-email-select-actions", children: [_jsx("button", { type: "button", onClick: selectAllFiltered, children: "All" }), _jsx("button", { type: "button", onClick: clearAll, disabled: value.length === 0, children: "Clear" })] }) })), _jsx("ul", { className: "vertebr-email-select-list", children: filtered.length === 0 ? (_jsx("li", { className: "vertebr-email-select-empty", children: "No matches" })) : (filtered.map((option) => {
+                            const on = selected.has(normalizeId(option.id));
+                            return (_jsx("li", { children: _jsxs("label", { "data-on": on ? "true" : undefined, "data-media": option.imageUrl ? "true" : undefined, children: [_jsx("input", { type: "checkbox", checked: on, onChange: () => toggle(option.id) }), option.imageUrl ? (_jsx("img", { className: "vertebr-email-select-thumb", src: option.imageUrl, alt: "", loading: "lazy" })) : null, _jsxs("span", { className: "vertebr-email-select-copy", children: [_jsx("span", { className: "vertebr-email-select-primary", children: option.label }), option.secondary ? (_jsx("span", { className: "vertebr-email-select-secondary", children: option.secondary })) : null] })] }) }, option.id));
+                        })) })] })) : null] }));
+}

package/dist/components/metrics/MetricsBoard.d.ts

@@ -1,10 +1,16 @@
-import type { MetricCard } from "@vertebr/client";
+import type { MetricCard, MetricChart } from "@vertebr/client";
+import { type MetricsRangeId } from "../../lib/metricsRanges";
 type MetricsBoardProps = {
     label?: string;
+    windowLabel?: string;
+    compareLabel?: string;
     metrics: MetricCard[];
+    charts?: MetricChart[];
+    range?: MetricsRangeId;
+    onRangeChange?: (range: MetricsRangeId) => void;
     onRefresh?: () => void;
     loading?: boolean;
 };
-export declare function MetricsBoard({ label, metrics, onRefresh, loading, }: MetricsBoardProps): import("react").JSX.Element;
+export declare function MetricsBoard({ label, windowLabel, compareLabel, metrics, charts, range, onRangeChange, onRefresh, loading, }: MetricsBoardProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=MetricsBoard.d.ts.map

package/dist/components/metrics/MetricsBoard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsBoard.d.ts","sourceRoot":"","sources":["../../../src/components/metrics/MetricsBoard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAkB,EAClB,OAAO,EACP,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,+BAqCnB"}
+{"version":3,"file":"MetricsBoard.d.ts","sourceRoot":"","sources":["../../../src/components/metrics/MetricsBoard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE/D,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA6GF,wBAAgB,YAAY,CAAC,EAC3B,KAAkB,EAClB,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,+BAsKnB"}