@rapidmx/crm-plugin 0.1.0

package/dist/apps/shared/components/designer/designModel.js

@@ -0,0 +1,230 @@
+/** A fresh id for a section, column or block. */
+export function newId() {
+    return crypto.randomUUID();
+}
+/** The block types the palette offers, in its order, with what each is called. */
+export const BLOCK_TYPES = [
+    { type: "heading", label: "Heading" },
+    { type: "text", label: "Text" },
+    { type: "image", label: "Image" },
+    { type: "button", label: "Button" },
+    { type: "divider", label: "Divider" },
+    { type: "spacer", label: "Spacer" },
+    { type: "social", label: "Social links" },
+    { type: "footer", label: "Footer" },
+    { type: "html", label: "HTML" },
+];
+/** What a block type is called. */
+export function blockLabel(type) {
+    return BLOCK_TYPES.find((entry) => entry.type === type).label;
+}
+/** A new block of `type`, with the content a new one starts with. */
+export function newBlock(type) {
+    const id = newId();
+    switch (type) {
+        case "heading":
+            return { id, type, text: "New heading", level: 2 };
+        case "text":
+            return { id, type, html: "<p>Write something here.</p>" };
+        case "image":
+            return { id, type, src: "", alt: "" };
+        case "button":
+            return { id, type, text: "Click here", href: "" };
+        case "divider":
+            return { id, type };
+        case "spacer":
+            return { id, type, height: 24 };
+        case "social":
+            return { id, type, links: [{ network: "web", href: "" }], align: "center" };
+        case "html":
+            return { id, type, html: "<p>Your HTML</p>" };
+        default:
+            return { id, type: "footer" };
+    }
+}
+/** A new section with `columns` empty columns (1 to 4). */
+export function newSection(columns) {
+    return { id: newId(), padding: 16, columns: Array.from({ length: columns }, () => ({ id: newId(), blocks: [] })) };
+}
+/** `blocks` with fresh ids, for pasting a saved block or duplicating one. */
+export function withNewIds(blocks) {
+    return blocks.map((block) => ({ ...structuredClone(block), id: newId() }));
+}
+/** Where block `id` is, or `undefined`. */
+export function findBlock(design, id) {
+    for (const [section, { columns }] of design.sections.entries()) {
+        for (const [column, { blocks }] of columns.entries()) {
+            const index = blocks.findIndex((block) => block.id === id);
+            if (index >= 0) {
+                return { section, column, index };
+            }
+        }
+    }
+    return undefined;
+}
+/** The block `id`, or `undefined`. */
+export function getBlock(design, id) {
+    const at = findBlock(design, id);
+    return at && design.sections[at.section].columns[at.column].blocks[at.index];
+}
+/** Where column `id` is: its section's index and its own. */
+function findColumn(design, id) {
+    for (const [section, { columns }] of design.sections.entries()) {
+        const column = columns.findIndex((entry) => entry.id === id);
+        if (column >= 0) {
+            return { section, column };
+        }
+    }
+    return undefined;
+}
+/** `design` with the blocks of each column passed through `change` (given the column's id). */
+function mapColumns(design, change) {
+    return {
+        ...design,
+        sections: design.sections.map((section) => ({ ...section, columns: section.columns.map((column) => ({ ...column, blocks: change(column) })) })),
+    };
+}
+/** `design` with block `id` changed by `patch`. */
+export function updateBlock(design, id, patch) {
+    return mapColumns(design, ({ blocks }) => blocks.map((block) => (block.id === id ? { ...block, ...patch } : block)));
+}
+/** `design` without block `id`. */
+export function removeBlock(design, id) {
+    return mapColumns(design, ({ blocks }) => blocks.filter((block) => block.id !== id));
+}
+/** `design` with `blocks` put into column `columnId` at `index` (its end when past it). */
+export function insertBlocks(design, columnId, index, blocks) {
+    return mapColumns(design, (column) => (column.id === columnId ? [...column.blocks.slice(0, index), ...blocks, ...column.blocks.slice(index)] : column.blocks));
+}
+/** `design` with a copy of block `id` right after it; the copy's id is returned too. */
+export function duplicateBlock(design, id) {
+    const at = findBlock(design, id);
+    const column = design.sections[at.section].columns[at.column];
+    const [copy] = withNewIds([column.blocks[at.index]]);
+    return { design: insertBlocks(design, column.id, at.index + 1, [copy]), id: copy.id };
+}
+/** `design` with block `id` moved to column `columnId` at `index` (counted without the block). */
+export function moveBlock(design, id, columnId, index) {
+    const block = getBlock(design, id);
+    return block ? insertBlocks(removeBlock(design, id), columnId, index, [block]) : design;
+}
+/** `design` with block `id` one place up (`delta` -1) or down (1) its column; unchanged at the column's end. */
+export function nudgeBlock(design, id, delta) {
+    const at = findBlock(design, id);
+    const column = design.sections[at.section].columns[at.column];
+    const index = at.index + delta;
+    return index < 0 || index >= column.blocks.length ? design : moveBlock(design, id, column.id, index);
+}
+/**
+ * `design` after dragging block `activeId` over `overId` - another block (it takes that block's place) or a column (it goes to the column's
+ * end, which is how an empty column is dropped into). Unchanged when either is unknown.
+ */
+export function dropBlock(design, activeId, overId) {
+    const from = findBlock(design, activeId);
+    if (!from || activeId === overId) {
+        return design;
+    }
+    const overBlock = findBlock(design, overId);
+    if (overBlock) {
+        const columnId = design.sections[overBlock.section].columns[overBlock.column].id;
+        return moveBlock(design, activeId, columnId, overBlock.index);
+    }
+    const overColumn = findColumn(design, overId);
+    if (!overColumn) {
+        return design;
+    }
+    const column = design.sections[overColumn.section].columns[overColumn.column];
+    const sameColumn = from.section === overColumn.section && from.column === overColumn.column;
+    return moveBlock(design, activeId, column.id, column.blocks.length - (sameColumn ? 1 : 0));
+}
+/** `design` with `section` put at `index`. */
+export function addSection(design, index, section) {
+    return { ...design, sections: [...design.sections.slice(0, index), section, ...design.sections.slice(index)] };
+}
+/** `design` without section `id`. */
+export function removeSection(design, id) {
+    return { ...design, sections: design.sections.filter((section) => section.id !== id) };
+}
+/** `design` with section `id` one place up (-1) or down (1); unchanged at either end. */
+export function nudgeSection(design, id, delta) {
+    const from = design.sections.findIndex((section) => section.id === id);
+    const to = from + delta;
+    if (to < 0 || to >= design.sections.length) {
+        return design;
+    }
+    const sections = [...design.sections];
+    [sections[from], sections[to]] = [sections[to], sections[from]];
+    return { ...design, sections };
+}
+/**
+ * `design` with section `id` changed by `patch`; a `columns` count (1 to 4) adds empty columns or folds the blocks of removed ones into
+ * the last one kept, so no block is lost.
+ */
+export function updateSection(design, id, patch) {
+    const { columns: count, ...rest } = patch;
+    return {
+        ...design,
+        sections: design.sections.map((section) => {
+            if (section.id !== id) {
+                return section;
+            }
+            let columns = section.columns;
+            if (count !== undefined && count > columns.length) {
+                columns = [...columns, ...Array.from({ length: count - columns.length }, () => ({ id: newId(), blocks: [] }))];
+            }
+            else if (count !== undefined && count < columns.length) {
+                const folded = columns.slice(count - 1).flatMap((column) => column.blocks);
+                columns = [...columns.slice(0, count - 1), { ...columns[count - 1], blocks: folded }];
+            }
+            return { ...section, ...rest, columns };
+        }),
+    };
+}
+/** What stops a design being saved, block by block - fields the server would refuse. */
+export function designProblems(design) {
+    const problems = [];
+    for (const { columns } of design.sections) {
+        for (const { blocks } of columns) {
+            for (const block of blocks) {
+                const add = (message) => problems.push({ blockId: block.id, message });
+                if (block.type === "image" && !/^https:\/\//i.test(block.src)) {
+                    add("An image needs an https:// address.");
+                }
+                else if (block.type === "button" && !isLink(block.href)) {
+                    add(`The button "${block.text}" needs a link.`);
+                }
+                else if (block.type === "social" && block.links.some((link) => !isLink(link.href))) {
+                    add("Every social link needs an address.");
+                }
+                else if (block.type === "heading" && block.text.trim() === "") {
+                    add("A heading needs some text.");
+                }
+            }
+        }
+    }
+    return problems;
+}
+/** Whether `href` is a link the server takes: web, mail or phone, or starting with a merge tag. */
+export function isLink(href) {
+    return /^(?:https?:\/\/\S|mailto:\S|tel:\S|\{\{)/i.test(href.trim());
+}
+/** How many designs back undo reaches. */
+export const HISTORY_LIMIT = 100;
+/** `history` with `design` as the current design (dropping what was undone). */
+export function record(history, design) {
+    return { past: [...history.past, history.present].slice(-HISTORY_LIMIT), present: design, future: [] };
+}
+/** `history` one step back; unchanged when there's nothing to undo. */
+export function undo(history) {
+    if (history.past.length === 0) {
+        return history;
+    }
+    return { past: history.past.slice(0, -1), present: history.past[history.past.length - 1], future: [history.present, ...history.future] };
+}
+/** `history` one step forward again; unchanged when nothing was undone. */
+export function redo(history) {
+    if (history.future.length === 0) {
+        return history;
+    }
+    return { past: [...history.past, history.present], present: history.future[0], future: history.future.slice(1) };
+}

package/dist/apps/shared/components/public/PublicPages.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The CRM's public pages, which subscribers reach from emails and forms without signing in: the preference center, double opt-in
+ * confirmation, one-click unsubscribe, and signup forms. Each is drawn in the deployment's branding.
+ */
+import React, { PropsWithChildren } from "react";
+/** The frame of a public page: the deployment's branding around a centred card. */
+export declare function PublicPage({ title, children }: PropsWithChildren<{
+    title: string;
+}>): React.JSX.Element;
+/** A page that needs a token from an email but was opened without one. */
+export declare function MissingLinkPage({ title }: {
+    title: string;
+}): React.JSX.Element;
+/** The preference center: which lists to be on, and unsubscribing from all email. */
+export declare function PreferenceCenterPage({ token }: {
+    token: string;
+}): React.JSX.Element;
+/** Confirming a double opt-in subscription: one button, so a link scanner opening the page doesn't confirm on the reader's behalf. */
+export declare function ConfirmPage({ token }: {
+    token: string;
+}): React.JSX.Element;
+/** An unsubscribe link's landing page: one button, then a way to the preference center. */
+export declare function UnsubscribePage({ token }: {
+    token: string;
+}): React.JSX.Element;
+/** A signup form. */
+export declare function SignupFormPage({ formUid }: {
+    formUid: string;
+}): React.JSX.Element;

package/dist/apps/shared/components/public/PublicPages.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The CRM's public pages, which subscribers reach from emails and forms without signing in: the preference center, double opt-in
+ * confirmation, one-click unsubscribe, and signup forms. Each is drawn in the deployment's branding.
+ */
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/web-client/lib/util/api.js";
+import useBranding from "@rapidmx/web-client/lib/branding/useBranding.js";
+import { BrandingFooter, BrandingHeader } from "@rapidmx/web-client/shared/components/layout/BrandingChrome.js";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import FormField from "@rapidmx/web-client/lib/components/forms/FormField.js";
+import { confirmSubscription, getPreferences, getPublicForm, savePreferences, submitForm, unsubscribe, } from "../../publicApi.js";
+import { HONEYPOT_NAME } from "./honeypot.js";
+const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/** What a failed call says to a visitor: the server's own words for a refusal, a friendlier line for a link that doesn't work. */
+function visitorMessage(err, fallback) {
+    if (err instanceof ApiRequestError && err.status === 404) {
+        return "This link doesn't work any more. Use the link in your most recent email.";
+    }
+    return err instanceof ApiRequestError ? err.message : fallback;
+}
+/** The frame of a public page: the deployment's branding around a centred card. */
+export function PublicPage({ title, children }) {
+    const { branding } = useBranding();
+    return (_jsxs("div", { className: "min-h-screen flex flex-col", children: [_jsx(BrandingHeader, { branding: branding }), _jsx("main", { className: "flex-1 bg-surface-alt px-4 py-8 sm:py-12", children: _jsxs("div", { className: "mx-auto w-full max-w-xl rounded-lg border border-border bg-surface shadow-sm p-6 sm:p-8", children: [_jsx("h1", { className: "text-xl font-bold tracking-tight mb-4", children: title }), children] }) }), _jsx(BrandingFooter, { branding: branding })] }));
+}
+/** A page that needs a token from an email but was opened without one. */
+export function MissingLinkPage({ title }) {
+    return (_jsx(PublicPage, { title: title, children: _jsx("p", { className: "text-sm", children: "Open this page from the link in one of our emails." }) }));
+}
+/** The preference center: which lists to be on, and unsubscribing from all email. */
+export function PreferenceCenterPage({ token }) {
+    const [preferences, setPreferences] = useState(null);
+    const [choices, setChoices] = useState({});
+    const [error, setError] = useState(null);
+    const [saved, setSaved] = useState(null);
+    function show(next) {
+        setPreferences(next);
+        setChoices(Object.fromEntries(next.lists.map((list) => [list.uid, list.subscribed])));
+    }
+    useEffect(() => {
+        getPreferences(token)
+            .then(show)
+            .catch((err) => setError(visitorMessage(err, "Your preferences could not be loaded.")));
+    }, [token]);
+    async function save(input, message) {
+        try {
+            show(await savePreferences(token, input));
+            setSaved(message);
+            setError(null);
+        }
+        catch (err) {
+            setSaved(null);
+            setError(visitorMessage(err, "Your preferences could not be saved."));
+        }
+    }
+    return (_jsxs(PublicPage, { title: "Email preferences", children: [error && _jsx(Alert, { children: error }), saved && _jsx("p", { className: "text-sm text-success mb-3", children: saved }), preferences && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm mb-4", children: ["Choose what ", preferences.workspaceName, " sends to ", _jsx("strong", { children: preferences.email }), "."] }), preferences.unsubscribedAll && (_jsxs("div", { className: "text-sm mb-4", children: ["You have unsubscribed from all email.", " ", _jsx("button", { type: "button", className: "text-primary-dark underline", onClick: () => void save({ unsubscribeAll: false }, "Welcome back."), children: "Resubscribe" })] })), _jsxs("form", { onSubmit: (event) => {
+                            event.preventDefault();
+                            void save({ lists: choices }, "Your preferences are saved.");
+                        }, className: "flex flex-col gap-3", children: [preferences.lists.map((list) => (_jsxs("label", { className: "flex items-start gap-3 text-sm", children: [_jsx("input", { type: "checkbox", className: "mt-1", checked: choices[list.uid] ?? false, onChange: (event) => setChoices((current) => ({ ...current, [list.uid]: event.target.checked })) }), _jsxs("span", { children: [_jsx("span", { className: "font-medium", children: list.name }), list.description && _jsx("span", { className: "block text-text-muted", children: list.description })] })] }, list.uid))), preferences.lists.length > 0 && (_jsx(Button, { type: "submit", className: "!w-auto self-start", children: "Save preferences" }))] }), !preferences.unsubscribedAll && (_jsx("button", { type: "button", className: "text-sm text-danger underline mt-6", onClick: () => void save({ unsubscribeAll: true }, "You won't get any more marketing email from us."), children: "Unsubscribe from all email" }))] }))] }));
+}
+/** Confirming a double opt-in subscription: one button, so a link scanner opening the page doesn't confirm on the reader's behalf. */
+export function ConfirmPage({ token }) {
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    async function confirm() {
+        setBusy(true);
+        try {
+            setResult(await confirmSubscription(token));
+            setError(null);
+        }
+        catch (err) {
+            setError(visitorMessage(err, "Your subscription could not be confirmed."));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs(PublicPage, { title: "Confirm your subscription", children: [error && _jsx(Alert, { children: error }), result ? (_jsx("p", { className: "text-sm", children: result.lists.length > 0
+                    ? `Thanks! You're subscribed to ${result.lists.join(", ")} from ${result.workspaceName}.`
+                    : "There is nothing left to confirm: you may have confirmed already, or unsubscribed since." })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm mb-4", children: "Confirm that you want to receive these emails." }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void confirm(), children: "Confirm subscription" })] }))] }));
+}
+/** An unsubscribe link's landing page: one button, then a way to the preference center. */
+export function UnsubscribePage({ token }) {
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    async function run() {
+        setBusy(true);
+        try {
+            setResult(await unsubscribe(token));
+            setError(null);
+        }
+        catch (err) {
+            setError(visitorMessage(err, "You could not be unsubscribed. Please try again."));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs(PublicPage, { title: "Unsubscribe", children: [error && _jsx(Alert, { children: error }), result ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm mb-4", children: result.list ? `You're unsubscribed from ${result.list}.` : `You won't get any more marketing email from ${result.workspaceName}.` }), _jsx("a", { className: "text-sm text-primary-dark underline", href: `/subscriptions/${encodeURIComponent(result.preferencesToken)}`, children: "Manage your email preferences" })] })) : (_jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void run(), children: "Unsubscribe" }))] }));
+}
+/** A signup form. */
+export function SignupFormPage({ formUid }) {
+    const [form, setForm] = useState(null);
+    const [values, setValues] = useState({});
+    const [trap, setTrap] = useState("");
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        getPublicForm(formUid)
+            .then(setForm)
+            .catch((err) => setError(err instanceof ApiRequestError && err.status === 404 ? "This form isn't available." : "The form could not be loaded."));
+    }, [formUid]);
+    async function submit(event) {
+        event.preventDefault();
+        setBusy(true);
+        try {
+            const answer = await submitForm(formUid, values, trap);
+            if (answer.result === "subscribed" && answer.redirectUrl) {
+                window.location.assign(answer.redirectUrl);
+                return;
+            }
+            setResult(answer);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "The form could not be sent. Please try again.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs(PublicPage, { title: form?.title ?? "Sign up", children: [error && _jsx(Alert, { children: error }), result && _jsx("p", { className: "text-sm", children: result.message }), form && !result && (_jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3", "aria-label": form.title, children: [form.description && _jsx("p", { className: "text-sm text-text-muted", children: form.description }), form.fields.map((field) => (_jsx(SignupField, { field: field, value: values[field.target], onChange: (value) => setValues((current) => ({ ...current, [field.target]: value })) }, field.target))), _jsx("div", { "aria-hidden": "true", className: "absolute -left-[9999px] h-0 overflow-hidden", children: _jsxs("label", { children: ["Leave this empty", _jsx("input", { name: HONEYPOT_NAME, tabIndex: -1, autoComplete: "off", value: trap, onChange: (event) => setTrap(event.target.value) })] }) }), _jsx(Button, { type: "submit", className: "!w-auto self-start", loading: busy, disabled: busy, children: "Sign up" })] }))] }));
+}
+/** One field of a signup form, with an input suited to its type. */
+function SignupField({ field, value, onChange }) {
+    const id = `signup-${field.target}`;
+    const label = `${field.label}${field.required ? " *" : ""}`;
+    if (field.type === "boolean") {
+        return (_jsxs("label", { className: "text-sm flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: value === true, onChange: (event) => onChange(event.target.checked) }), label] }));
+    }
+    if (field.type === "multi_select") {
+        const chosen = Array.isArray(value) ? value : [];
+        return (_jsxs("fieldset", { className: "text-sm", children: [_jsx("legend", { className: "font-medium mb-1", children: label }), (field.options ?? []).map((option) => (_jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: chosen.includes(option.value), onChange: (event) => onChange(event.target.checked ? [...chosen, option.value] : chosen.filter((entry) => entry !== option.value)) }), option.label] }, option.value)))] }));
+    }
+    return (_jsx(FormField, { label: label, htmlFor: id, children: field.type === "select" ? (_jsxs("select", { id: id, className: INPUT_CLASS, value: value ?? "", required: field.required, onChange: (event) => onChange(event.target.value), children: [_jsx("option", { value: "", children: "Choose\u2026" }), (field.options ?? []).map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })) : (_jsx("input", { id: id, className: INPUT_CLASS, type: field.type === "email" ? "email" : field.type === "number" ? "number" : field.type === "date" ? "date" : "text", required: field.required, value: value ?? "", onChange: (event) => onChange(event.target.value) })) }));
+}

package/dist/apps/shared/components/public/honeypot.d.ts

@@ -0,0 +1,2 @@
+/** The name of a signup form's hidden trap field - the server's `HONEYPOT_FIELD`: people never fill it in, simple bots do. */
+export declare const HONEYPOT_NAME = "website";

package/dist/apps/shared/components/public/honeypot.js

@@ -0,0 +1,6 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** The name of a signup form's hidden trap field - the server's `HONEYPOT_FIELD`: people never fill it in, simple bots do. */
+export const HONEYPOT_NAME = "website";

package/dist/apps/shared/components/reports/Charts.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+/**
+ * The chart colors, by role. The three series slots are a validated categorical order (checked for color-vision deficiency
+ * separation in both schemes); the dark steps are their own, not a flip. `<html data-theme>` wins over the system's scheme.
+ */
+export declare const VIZ_STYLE = "\n.crm-viz {\n  --viz-series-1: #2a78d6; --viz-series-2: #eb6834; --viz-series-3: #1baf7a;\n  --viz-grid: #e1e0d9; --viz-axis: #c3c2b7; --viz-muted: #898781; --viz-surface: #fcfcfb;\n}\n@media (prefers-color-scheme: dark) {\n  :root:where(:not([data-theme=\"light\"])) .crm-viz {\n    --viz-series-1: #3987e5; --viz-series-2: #d95926; --viz-series-3: #199e70;\n    --viz-grid: #2c2c2a; --viz-axis: #383835; --viz-surface: #1a1a19;\n  }\n}\n:root[data-theme=\"dark\"] .crm-viz {\n  --viz-series-1: #3987e5; --viz-series-2: #d95926; --viz-series-3: #199e70;\n  --viz-grid: #2c2c2a; --viz-axis: #383835; --viz-surface: #1a1a19;\n}\n";
+/** One line of a chart, in a fixed slot (1-3) so its color follows it whatever else is shown. */
+export interface Series {
+    key: string;
+    label: string;
+    slot: 1 | 2 | 3;
+    values: number[];
+}
+/** The smallest of 1, 2, 5 × 10ⁿ at or above `value` (1 for nothing), so the axis reads in round numbers. */
+export declare function niceMax(value: number): number;
+/** `YYYY-MM-DD` as a short day ("Mar 4"), in UTC like the reports. */
+export declare function shortDate(date: string): string;
+/** Lines over days, labelled at their ends, with a crosshair and a card of every value on hover. */
+export declare function LineChart({ title, days, series, format }: {
+    title: string;
+    days: string[];
+    series: Series[];
+    format?: (value: number) => string;
+}): React.JSX.Element;
+/** One measure per day as columns (rounded at the top, gapped), with a card of the value on hover. */
+export declare function ColumnChart({ title, label, days, values, format }: {
+    title: string;
+    label: string;
+    days: string[];
+    values: number[];
+    format?: (value: number) => string;
+}): React.JSX.Element;

package/dist/apps/shared/components/reports/Charts.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+/**
+ * The chart colors, by role. The three series slots are a validated categorical order (checked for color-vision deficiency
+ * separation in both schemes); the dark steps are their own, not a flip. `<html data-theme>` wins over the system's scheme.
+ */
+export const VIZ_STYLE = `
+.crm-viz {
+  --viz-series-1: #2a78d6; --viz-series-2: #eb6834; --viz-series-3: #1baf7a;
+  --viz-grid: #e1e0d9; --viz-axis: #c3c2b7; --viz-muted: #898781; --viz-surface: #fcfcfb;
+}
+@media (prefers-color-scheme: dark) {
+  :root:where(:not([data-theme="light"])) .crm-viz {
+    --viz-series-1: #3987e5; --viz-series-2: #d95926; --viz-series-3: #199e70;
+    --viz-grid: #2c2c2a; --viz-axis: #383835; --viz-surface: #1a1a19;
+  }
+}
+:root[data-theme="dark"] .crm-viz {
+  --viz-series-1: #3987e5; --viz-series-2: #d95926; --viz-series-3: #199e70;
+  --viz-grid: #2c2c2a; --viz-axis: #383835; --viz-surface: #1a1a19;
+}
+`;
+const WIDTH = 640;
+const HEIGHT = 200;
+const PAD = { top: 12, right: 96, bottom: 24, left: 44 };
+const PLOT_W = WIDTH - PAD.left - PAD.right;
+const PLOT_H = HEIGHT - PAD.top - PAD.bottom;
+/** The smallest of 1, 2, 5 × 10ⁿ at or above `value` (1 for nothing), so the axis reads in round numbers. */
+export function niceMax(value) {
+    if (value <= 0) {
+        return 1;
+    }
+    const magnitude = 10 ** Math.floor(Math.log10(value));
+    const step = [1, 2, 5, 10].find((candidate) => candidate * magnitude >= value);
+    return step * magnitude;
+}
+/** `YYYY-MM-DD` as a short day ("Mar 4"), in UTC like the reports. */
+export function shortDate(date) {
+    return new Date(`${date}T00:00:00Z`).toLocaleDateString(undefined, { month: "short", day: "numeric", timeZone: "UTC" });
+}
+const x = (index, count) => PAD.left + (count <= 1 ? PLOT_W / 2 : (index / (count - 1)) * PLOT_W);
+const y = (value, max) => PAD.top + PLOT_H - (value / max) * PLOT_H;
+/** The day under the pointer, from its position across the plot. */
+function indexAt(event, count) {
+    const box = event.currentTarget.getBoundingClientRect();
+    const plotX = box.width > 0 ? ((event.clientX - box.left) / box.width) * WIDTH : PAD.left;
+    const ratio = (plotX - PAD.left) / PLOT_W;
+    return Math.min(count - 1, Math.max(0, Math.round(ratio * (count - 1))));
+}
+/** Gridlines and the value axis: four steps up to `max`. */
+function Grid({ max, format }) {
+    return (_jsx("g", { children: [0, 1, 2, 3, 4].map((step) => {
+            const value = (max / 4) * step;
+            return (_jsxs("g", { children: [_jsx("line", { x1: PAD.left, x2: PAD.left + PLOT_W, y1: y(value, max), y2: y(value, max), stroke: step === 0 ? "var(--viz-axis)" : "var(--viz-grid)", strokeWidth: 1 }), _jsx("text", { x: PAD.left - 6, y: y(value, max), dy: "0.32em", textAnchor: "end", fontSize: 10, fill: "var(--viz-muted)", style: { fontVariantNumeric: "tabular-nums" }, children: format(value) })] }, step));
+        }) }));
+}
+/** The first, middle and last days under the plot. */
+function DayAxis({ days }) {
+    const shown = [...new Set([0, Math.floor((days.length - 1) / 2), days.length - 1])];
+    return (_jsx("g", { children: shown.map((index) => (_jsx("text", { x: x(index, days.length), y: HEIGHT - 6, textAnchor: index === 0 ? "start" : index === days.length - 1 ? "end" : "middle", fontSize: 10, fill: "var(--viz-muted)", children: shortDate(days[index]) }, index))) }));
+}
+/** A table of the same numbers, for reading exact values and for assistive technology. */
+function DataTable({ days, columns, format }) {
+    return (_jsx("div", { className: "max-h-64 overflow-y-auto mt-2", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-left text-text-muted", children: [_jsx("th", { className: "font-normal py-1", children: "Day" }), columns.map((column) => (_jsx("th", { className: "font-normal py-1 text-right", children: column.label }, column.label)))] }) }), _jsx("tbody", { children: days.map((day, index) => (_jsxs("tr", { className: "border-t border-border", children: [_jsx("td", { className: "py-1", children: shortDate(day) }), columns.map((column) => (_jsx("td", { className: "py-1 text-right tabular-nums", children: format(column.values[index]) }, column.label)))] }, day))) })] }) }));
+}
+/** A chart's frame: its title, legend, the chart or its table, and the switch between them. */
+function ChartFrame({ title, legend, table, children, }) {
+    const [showTable, setShowTable] = useState(false);
+    return (_jsxs("figure", { className: "crm-viz border border-border rounded-sm p-3 m-0", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2 flex-wrap", children: [_jsx("figcaption", { className: "text-sm font-semibold", children: title }), legend && (_jsx("ul", { className: "flex gap-3 text-xs text-text-muted list-none m-0 p-0", "aria-label": "Legend", children: legend.map((series) => (_jsxs("li", { className: "flex items-center gap-1", children: [_jsx("span", { "aria-hidden": true, className: "inline-block w-3 h-0.5 rounded-full", style: { background: `var(--viz-series-${series.slot})` } }), series.label] }, series.key))) })), _jsx("button", { type: "button", className: "ml-auto text-xs text-primary hover:underline", "aria-pressed": showTable, onClick: () => setShowTable(!showTable), children: showTable ? "Show chart" : "Show table" })] }), showTable ? table : children] }));
+}
+/** The hover card: the day and each value, in text ink beside a colored key. */
+function Tooltip({ index, count, day, rows }) {
+    const left = (x(index, count) / WIDTH) * 100;
+    return (_jsxs("div", { role: "status", className: "absolute top-0 pointer-events-none bg-surface border border-border rounded-sm shadow-sm px-2 py-1 text-xs whitespace-nowrap", style: left > 60 ? { right: `${100 - left + 2}%` } : { left: `${left + 2}%` }, children: [_jsx("div", { className: "font-semibold", children: shortDate(day) }), rows.map((row) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { "aria-hidden": true, className: "inline-block w-2 h-2 rounded-full", style: { background: `var(--viz-series-${row.slot})` } }), _jsx("span", { className: "text-text-muted", children: row.label }), _jsx("span", { className: "ml-auto pl-2 tabular-nums", children: row.value })] }, row.label)))] }));
+}
+/** Moves the highlighted day with the arrow keys, Home and End. */
+function useDayCursor(count) {
+    const [active, setActive] = useState(null);
+    const onKeyDown = (event) => {
+        const moves = { ArrowLeft: (active ?? count) - 1, ArrowRight: (active ?? -1) + 1, Home: 0, End: count - 1 };
+        if (event.key in moves) {
+            event.preventDefault();
+            setActive(Math.min(count - 1, Math.max(0, moves[event.key])));
+        }
+        else if (event.key === "Escape") {
+            setActive(null);
+        }
+    };
+    return [active, setActive, onKeyDown];
+}
+/** Lines over days, labelled at their ends, with a crosshair and a card of every value on hover. */
+export function LineChart({ title, days, series, format = (value) => value.toLocaleString() }) {
+    const [active, setActive, onKeyDown] = useDayCursor(days.length);
+    const max = niceMax(Math.max(0, ...series.flatMap((entry) => entry.values)));
+    const last = days.length - 1;
+    // End labels, pushed apart so they never overlap.
+    const labels = series.map((entry) => ({ entry, at: y(entry.values[last], max) })).sort((a, b) => a.at - b.at);
+    for (let index = 1; index < labels.length; index++) {
+        labels[index].at = Math.max(labels[index].at, labels[index - 1].at + 12);
+    }
+    return (_jsx(ChartFrame, { title: title, legend: series, table: _jsx(DataTable, { days: days, columns: series.map(({ label, values }) => ({ label, values })), format: format }), children: _jsxs("div", { className: "relative", children: [_jsxs("svg", { viewBox: `0 0 ${WIDTH} ${HEIGHT}`, className: "w-full h-auto block outline-none focus-visible:ring-2 focus-visible:ring-primary", role: "img", "aria-label": `${title}, ${shortDate(days[0])} to ${shortDate(days[last])}`, tabIndex: 0, onKeyDown: onKeyDown, onMouseMove: (event) => setActive(indexAt(event, days.length)), onMouseLeave: () => setActive(null), onBlur: () => setActive(null), children: [_jsx(Grid, { max: max, format: format }), _jsx(DayAxis, { days: days }), active !== null && _jsx("line", { x1: x(active, days.length), x2: x(active, days.length), y1: PAD.top, y2: PAD.top + PLOT_H, stroke: "var(--viz-axis)", strokeWidth: 1 }), series.map((entry) => (_jsx("path", { d: entry.values.map((value, index) => `${index === 0 ? "M" : "L"}${x(index, days.length).toFixed(1)},${y(value, max).toFixed(1)}`).join(""), fill: "none", stroke: `var(--viz-series-${entry.slot})`, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }, entry.key))), active !== null &&
+                            series.map((entry) => (_jsx("circle", { cx: x(active, days.length), cy: y(entry.values[active], max), r: 4, fill: `var(--viz-series-${entry.slot})`, stroke: "var(--viz-surface)", strokeWidth: 2 }, entry.key))), labels.map(({ entry, at }) => (_jsx("text", { x: PAD.left + PLOT_W + 6, y: at, dy: "0.32em", fontSize: 11, fill: "currentColor", children: entry.label }, entry.key)))] }), active !== null && (_jsx(Tooltip, { index: active, count: days.length, day: days[active], rows: series.map((entry) => ({ label: entry.label, value: format(entry.values[active]), slot: entry.slot })) }))] }) }));
+}
+/** One measure per day as columns (rounded at the top, gapped), with a card of the value on hover. */
+export function ColumnChart({ title, label, days, values, format = (value) => value.toLocaleString() }) {
+    const [active, setActive, onKeyDown] = useDayCursor(days.length);
+    const max = niceMax(Math.max(0, ...values));
+    const slotWidth = PLOT_W / days.length;
+    const barWidth = Math.max(1, slotWidth - 2);
+    const baseline = PAD.top + PLOT_H;
+    return (_jsx(ChartFrame, { title: title, table: _jsx(DataTable, { days: days, columns: [{ label, values }], format: format }), children: _jsxs("div", { className: "relative", children: [_jsxs("svg", { viewBox: `0 0 ${WIDTH} ${HEIGHT}`, className: "w-full h-auto block outline-none focus-visible:ring-2 focus-visible:ring-primary", role: "img", "aria-label": `${title}, ${shortDate(days[0])} to ${shortDate(days[days.length - 1])}`, tabIndex: 0, onKeyDown: onKeyDown, onMouseLeave: () => setActive(null), onBlur: () => setActive(null), children: [_jsx(Grid, { max: max, format: format }), values.map((value, index) => {
+                            const left = PAD.left + index * slotWidth + 1;
+                            const height = (value / max) * PLOT_H;
+                            const radius = Math.min(4, barWidth / 2, height);
+                            return (_jsxs("g", { onMouseEnter: () => setActive(index), children: [_jsx("rect", { x: left - 1, y: PAD.top, width: slotWidth, height: PLOT_H, fill: "transparent" }), height > 0 && (_jsx("path", { d: `M${left},${baseline}V${baseline - height + radius}q0,-${radius} ${radius},-${radius}h${barWidth - 2 * radius}q${radius},0 ${radius},${radius}V${baseline}Z`, fill: "var(--viz-series-1)", opacity: active === null || active === index ? 1 : 0.55 }))] }, days[index]));
+                        }), _jsx("text", { x: PAD.left, y: HEIGHT - 6, fontSize: 10, fill: "var(--viz-muted)", children: shortDate(days[0]) }), _jsx("text", { x: PAD.left + PLOT_W, y: HEIGHT - 6, textAnchor: "end", fontSize: 10, fill: "var(--viz-muted)", children: shortDate(days[days.length - 1]) })] }), active !== null && _jsx(Tooltip, { index: active, count: days.length, day: days[active], rows: [{ label, value: format(values[active]), slot: 1 }] })] }) }));
+}

package/dist/apps/shared/components/reports/Reports.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/** The report periods offered, in days. */
+export declare const PERIODS: readonly number[];
+/**
+ * The workspace's reports over a period: email performance by day (sent, opened, clicked) with its rates and the recipient domains
+ * mailed most; audience growth (new contacts, subscribes and unsubscribes) with each list's subscribers; and sales (deals won by
+ * value, what is open, the win rate) for all pipelines or one. Days are UTC days.
+ */
+export default function Reports(): React.JSX.Element;